Floating multiple divs down - javascript

I have a menu that becomes a dropdown when it is in mobile, and floats right when it is desktop, therefore all my divs are reversed in order since float right wouldn't work otherwise
<div class="menu active">
<div class="dropdown-content">
<div class="menu-item whitelist">
Join Whitelist
</div>
<div class="menu-item">
FAQ
</div>
<div class="menu-item">
Team
</div>
<div class="menu-item">
Token
</div>
<div class="menu-item">
About
</div>
</div>
<div class="dropdown-btn">
<a class="dropdown" href="javascript:void(0)">☰</a>
</div>
</div>
my question is how can I make then "float" downwards in my dropdown menu so they are in the right order? Or is it better to change how they act when it's in desktop mode?

You probably want them in the correct order to begin with, then use display:inline-block to make them all go on a single line for desktop.
Hard to tell without seeing any css or design, but that sounds reasonable.

Related

Scrollspy on hidden sections

I can't seem to get scrollspy to work with hidden elements.
I place the data-spy="scroll" on the body, and data-target=".classOfNavWrapper", and it doesn't ignore the hidden elements like the docs imply, but rather seems to choose elements to activate almost at random.
Here's a fiddle: http://jsfiddle.net/shdapqap/1/
<div class="container">
<div class="row">
<div class="span3">
<div class="nav-wrapper">
<ul id="my-nav" class="nav nav-list affix">
<li>Moose</li>
<li>Bear</li>
<li>Beaver</li>
<li>Raccoon</li>
<li>Bobcat</li>
</ul>
</div>
</div>
<div class="span9 my-content">
<section id="moose">
Mooses are cool and big and stuff.
</section>
<section id="bear">
You better stay away from bears, they are bad news.
</section>
<section id="beaver">
Beavers like to slap their tail to scare predators and children.
</section>
<section id="raccoon" class="hidden">
Raccoons like french fries, don't ask me how I know.
</section>
<section id="bobcat" class="hidden">
I would like to know if bobcats go crazy for catnip like my house cat does.
</section>
<button class="show">Show next</button>
</div>
</div>
</div>
On the bottom is a show next button.. which shows the next hidden div and refreshes scrollspy, it only seems to work fluently once the last hidden class is removed.
Bootstrap version: 2.2.2 (stuck with that).
I solved this by replacing the ScrollSpy part of the Bootstrap 2.2.2 JS with the Scrollspy part from Bootstrap 3.3.5. And of course, remembering to refresh the scrollspy after revealing each item.

how to set background-image of list items in Javascript?

I have a simple div with bunch of list items that I need to set their background with javascript? any help would be highly appreciate it, let say I have url1, url2, url3, url4?
<div class="banner">
<ul>
<li style="background-image: url('img/sunset.jpg');">
<div class="inner">
<h1>The jQuery slider that just slides.</h1>
<p>No fancy effects or unnecessary markup, and it’s less than 3kb.</p>
<a class="btn" href="#download">Download</a> </div>
</li>
<li style="background-image: url('img/wood.jpg');">
<div class="inner">
<h1>Fluid, flexible, fantastically minimal.</h1>
<p>Use any HTML in your slides, extend with CSS. You have full control.</p>
<a class="btn" href="#download">Download</a> </div>
</li>
<li style="background-image: url('img/subway.jpg');">
<div class="inner">
<h1>Open-source.</h1>
<p>Everything to do with Unslider is hosted on GitHub.</p>
<a class="btn" href="//github.com/idiot/unslider">Contribute</a> </div>
</li>
<li style="background-image: url('img/shop.jpg');">
<div class="inner">
<h1>Uh, that’s about it.</h1>
<p>I just wanted to show you another slide.</p>
<a class="btn" href="#download">Download</a> </div>
</li>
</ul>
</div>
My suggestion here would be to create separate CSS classes for each of the background image styles you want. Then you can use a library like jQuery to addClass to any HTML element. Here's the jQuery documentation: addClass
Ideally, you want to avoid convoluting your CSS with JavaScript code and as much as possible, keep these two separate from each other.

Removing items based on values where an item can have multiple values

I have a system that lists an number of items from a database, these items can have three different states that can be attached to it, Manual, Auto and VIP. A single item in this list could be either of this states and sometimes two or all three at the same time.
The system also has three filters, Manual, Auto and VIP.
I am trying to build a system so that when a state has changed on a filter (box is checked/unchecked) the system will hide or show items from this list.
So i am struggling with this concept with my current implementation.
here is some code:
<ul class="content-list" id="update-list">
<li class="list-item"
data-auto="1"
data-manual="1"
data-vip="1">
<div class="list-avatar">
<p class="multi-circle">A/M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #1 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
<li class="list-item"
data-auto="1"
data-manual="1"
data-vip="0">
<div class="list-avatar">
<p class="multi-circle">A/M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #2 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
<li class="list-item"
data-auto="0"
data-manual="1"
data-vip="0">
<div class="list-avatar">
<p class="manual-circle">M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #3 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
I have three "data-" attributes attached to each list item, i wanted to use these to detect if the item show be displayed or not but i can't think of a simple way of doing this.
My other thought on the matter would be to add a class to each item saying if it is Manual, Auto or VIP for example
<li class="list-item manual auto vip">
I understand how to remove and display elements this way however it seems a little messy to me.
So what is the best way of achieving this using Jquery? I think i might be over engineering the whole thing.
Thanks for your time.
I think you might be looking for the attribute selector.
For example, when someone wants to see the "data-auto" items, you could do the following:
$("li[data-auto='1']").show();

Image Hide & Show on Text Hover Using Multiple Images/Links on One Page

I've looked around and unfortunately, haven't found anything that quite matches what I'm hoping to achieve. I have two things going on. First an image/content slider which I'm using Awkward Showcase for. Then within each slide I need to build a mousein/mouseout effect that swaps and hides an image when the user hovers over the text option. My JS looks like this:
$("#news-2, #news-3, #news-4, #news-5, #news-6").hide();
$("#newsitem-1, #newsitem-2, #newsitem-3, #newsitem-4, #newsitem-5, #newsitem-6").mouseover(function(){
$(this).css('cursor', 'pointer');
if($("#newsitem").val() != $(this).attr('id').replace('newsitem', 'news')){
$("#news-1").hide();
$("#news-2").hide();
$("#news-3").hide();
$("#news-4").hide();
$("#news-5").hide();
$("#news-6").hide();
$("#newsitem").val($(this).attr('id').replace('newsitem', 'news'));
var vid = $(this).attr('id').replace('newsitem', 'news');
$("#" + vid).show();
}
});
My html looks like this:
<div id="showcase" class="showcase">
<div class="showcase-slide cs-1">
<div class="showcase-content">
<div class="cs-container">
<div class="thumbs">
<div id="news-1"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></div>
<div id="news-2" style="display: none;"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></div>
<div id="news-3" style="display: none;"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></div>
</div>
<div class="cs-links">
<h2>Link Title 1</h2>
<ul>
<li id="newsitem-1">Hover Change Image 1</li>
<li id="newsitem-2">Hover Change Image 2</li>
<li id="newsitem-3">Hover Change Image 3</li>
</ul>
</div>
</div>
</div>
<div class="showcase-thumbnail">
<div class="showcase-thumbnail-caption">Caption Title</div>
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<div class="showcase-slide cs-2">
<div class="showcase-content">
<div class="cs-container">
<div class="thumbs">
<div id="news-4"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></div>
<div id="news-5" style="display: none;"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></div>
<div id="news-6" style="display: none;"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></div>
</div>
<div class="cs-links">
<h2>Link Title 2</h2>
<ul>
<li id="newsitem-4">Hover Change Image 1</li>
<li id="newsitem-5">Hover Change Image 2</li>
<li id="newsitem-6">Hover Change Image 3</li>
</ul>
</div>
</div>
</div>
<div class="showcase-thumbnail">
<div class="showcase-thumbnail-caption">Restaurant TV</div>
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
</div>
Any suggestions would be hugely appreciated. One thing to note is the code I've written only works once, once you engage the slide function the hover effect breaks unless you hard refresh.
Edit: Question is, how can I make this more efficient. I have multiple items (image and text). And any ideas why this breaks once the slide function is engaged?
I used ID's because it's a one to one relationship between the text and the associated image.
Edit 2: If I swap the order of my js, the function breaks. Here is a JSFiddle as long as I keep this order everything works until I engage the slider.
http://jsfiddle.net/mV3dJ/
I've not really seen a function done like this before but one thing that stands out to me as a potential breaker is this
var vid = $(this).attr('id').replace('newsitem', 'news');
If you're replacing an ID of something which listen to an event, then the event can only occur once on that element (as the next time it has a different name and so won't recognise it.
Ideally you want to use a web debugger like firebug or Chrome developer tools, set breakpoints and figure out from stepping through the code why it isn't working correctly.

change information in seperate divs with button click

I am trying to accomplish this effect but I'm sure the coding is incorrect. I want the image DIVs to swap content when each button is clicked. This is what I have so far, but I'm sure the code is incorrect. Is there a better way of achieving this? thanks, and forgive me for the noob question.
HTML:
<div class="item-1 content-item">
I am the 1st image content
</div>
<div class="item-2 content-item" style="display: none;">
I am the 2nd image content
</div>
<div class="item-3 content-item" style="display: none;">
I am the 3rd image content
</div>
<div class="item-1 content-item">
I am the content for item 1
</div>
<div class="item-2 content-item" style="display: none;">
I am the content for item 2
</div>
<div class="item-3 content-item" style="display: none;">
I am the content for item 3
</div>
<ul>
<li class="change-item" data-item="1">Item 1</li>
<li class="change-item" data-item="2">Item 2</li>
<li class="change-item" data-item="3">Item 3</li>
</ul>
jQuery:
$('.change-item').click(function(){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('.item-' + this_item).fadeIn();
});
A couple tips you might find helpful, even though it is working fine.
Since your items are actually grouped by number and the stuff in between is hidden, you could just group them together.
You should consider using id attributes in your markup. This makes it more clear that each one of your items is unique and makes the javascript run faster.
Your <ul> is technically in order, so it's more properly an <ol>. This is splitting hairs, and will give you numbers instead of bullet points, giving you more work to style it correctly. But it's worth mentioning.
Consider giving some indication that the list items are interactive. You could make them buttons or anchors (so they would display like hyperlinks). Or try a css rule for the cursor to make the mouse pointer change when they a user goes over the link.
Like this:
.change-item {
cursor: pointer;
}
Put it all together, it might look something like this:
HTML:
<div id="item-1" class="content-item">
<img src="/item-1.png"/>
<p>I am the content for item 1</p>
</div>
<div id="item-2" class="content-item" style="display:none;">
<img src="/item-2.png"/>
<p>I am the content for item 2</p>
</div>
<div id="item-3" class="content-item" style="display:none;">
<img src="/item-3.png"/>
<p>I am the content for item 3</p>
</div>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Javascript:
$('.change-item').click(function(){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('#item-' + this_item).fadeIn();
});
But as you can tell, your code is fully functional as is. You didn't do anything terribly wrong (good job!), these are just a few things that might make this page easier on you or your users.

Categories

Resources