Can anyone please help me out with simple example of drag and reordering of divs using angularjs?
<div id="abc" style = width:20px;height:20px; background:red>
ABC
</div>
<div id="xyz" style = width:20px;height:20px;background:blue>
XYZ
</div>
These are 2 horizontal squares.. I want to drag and swap their positions.If I am dragging red box at blue box position then blue one should be shifted to to red's position.
Can it be done with angularjs? I had seen some list reordering examples but very tricky to understand..If someone can give me simple example will be very helpful.
Thank you.
What about using a drag and drop plugin (it also works for resizing)? It will simplify your problem I guess.
This one works like a charm: Gridster
Example:
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div id="abc" style = width:20px;height:20px; background:red>
ABC
</div>
</li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
<div id="xyz" style = width:20px;height:20px;background:blue>
XYZ
</div>
</li>
</ul>
</div>
Related
I'm creating a simple notes SPA for my portfolio and i'm wondering what would be the correct HTML tags to use while creating the sidebar. I was using lists like everybody else but after i read an article about how listless navbars are better to SR (screen reader) users, i'm thinking about said technique, so instead of this:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Help</li>
<li>Contact</li>
</ul>
</nav>
We have this:
<div>
<a>Home</a>
<a>About</a>
<a>Help</a>
<a>Contact</a>
</div>
But then again, the navbar i'm creating does not technically includes links, but more like actions, like this:
/* Clicking shows saved notes */
<div class="nav-item">
<div class="nav-item__inner-ctr">
<i class="note-icon"></i>
<span>Notes</span>
</div>
</div>
/* Queries through saved notes */
<div class="nav-item">
<div class="nav-item__inner-ctr">
<i class="search-icon"></i>
<span>Search</span>
<div>
</div>
You get the point. So what should i use to group these elements? Thanks for your help in advance and sorry for the long post.
Is it a set of navigation links? Use a nav element.
Is it a list of things? Use an unordered or ordered list.
Is it something that the user is supposed to click on which isn't a link? Use a button element.
Is it multiple of these things? Combine multiple of these things.
I developed a timeline, however I am having some issues that I can't solve :(
Firstly, the timeline is not responsive, ie when the screen enlarges or I put a larger description, the timeline lines separate and I always want to have it together, does anyone know what it is?
Second problem: Timeline starts at value 1, how can I always start at value 4?
As you can see in the image, I have both problems: separate timeline lines and it starting at 1 and not 4 :(
HTML
<ul class="timeline" id="timeline" *ngFor="let priority of Priorities; let p = index;">
<li class="li complete">
<div class="timestamp">
<span class="priorityNumber">{{priority.id}}</span>
</div>
<div class="status">
<span class="circle"></span>
<h4 class="timelineh4">{{priority.text}}</h4>
</div>
</li>
</ul>
Seen your code, If you are using angular then why are you doing it the javascript way.
And fixed as much I can in this fork. I cant understand your second question's requirement Please brief on it.
I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>
I want to use an autocomplete's CSS in HTML code ... but it doesn't work. I tried to fetch the code from firefox, but I got no design on the HTML code.
Let's clarify the question:
My need: (I want to get the same design as the image below)
An image about what I need
CSS code of this image:
https://github.com/hailwood/jQuery-Tagit/tree/master/css/themeroller
Tags.css and bootstrap/bootstrap.css
What I tried:
<ul class="ui-autocomplete">
<ul class="tagit ui-widget ui-widget-content">
<li class="tagit-choice ui-widget-content ui-state-default tagit-new">
<a href="#" class="ui-corner-all">
<div class="ui-widget-header">
Title <span style="font-weight:normal">(used 4 times)</span>
</div>
<div class="ui-widget-content">a description here
</div>
</a>
</li>
</ul>
</ul>
But no design applied for my code! I used the right classes and ids.
Please let me know where I made a mistake.
I want to add my navigation in the sidebar, and there isn't space for it.
I want to set it up so that when I hover over a word such as (Links) a list will appear. But I'm not sure what code I should be using to accomplish this.
An example can be seen here: http://www.colourlovers.com/ when you hover over Browse it shows a list of other links.
<div id="navigation">
<a href="http://aftermidnightworkouts.tumblr.com/tagged/healthyrecipes">Dear
Charlie</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Portfolio</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Aftermidnightworkouts</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Writings</a>
</div>
Here's a little bit of code to get you started:
http://jsfiddle.net/jonigiuro/ZsAQb/
<ul id="navigation">
<li>
Dear Charlie
<ul class="subnav">
<li class="item">
subnav item1
</li>
<li class="item">
subnav item2
</li>
</ul>
</li>
</ul>
It's better to use a list for navigation menus like yours, it would be even better to wrap it in a nav tag (html5).
The trick is that you insert a child list for the subnavigation inside a list item of the main navigation and set it's css to be hidden by default. When you hover on a main navigation item you just target it's child subnavigation and display it
Just google for CSS drop down menu, lots of pages about it, you can even have it generated and then inspect the code yourself (for example here). You just need a bit of css code that use :hover selector.