Too long too read.
This is the core of my Gallery script. This looks more complicated then it really is.. but of my lack of JQuery (Javascript) knowledge im not able to program it on my own. The most javascript is only pseudo so it where nice if you could translate the pseudo javascript into actually valid javascript (Jquery).
I have a Gallery which shows a big image. I have a thumbnails list which contains some thumb images the user can click on to navigate between the Gallery Images. I have an information pool. Its a list which contains all big images for the Gallery. The Gallery gets its information from this information pool. - I use an invisible pool during some animation issues.
HTML
<div id="gallery">
<ul>
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page-->
</ul>
</div>
<div id="thumbs">
<ul>
<li>Thumb 1</li> <--! This list contains thumbnails for the gallery-->
<li>Thumb 2</li>
<li>Thumb 3</li>
<li>Thumb 4</li>
</ul>
</div>
<div style="display:hidden;" id="pool"> <-- its invisible for the human eyes -->
<ul> <--! This list is the information pool which stores the big pictures of the gallery-->
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
Pseudo (JQuery) Javascript
$('#thumbs ul > li).click( function() {
$(this).add the next li from the pool to this list //this snippet is important for me - how do I write this?
});
User Interaction e.g.
This is the workflow how it should work - im open for every good idea to get the result
User clicks thumbnail number 3
Script gets Item 3 from the #pool
and attract it to the #gallery (Javascript needed ^^)
Looks like this:
HTML
<div id="gallery">
<ul>
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page-->
<li>Item 3</li>
</ul>
</div>
Now we animate (we scroll 800px to Item 3)
$(#gallery ul).animate(right: -800);
HTML
<div id="gallery">
<ul>
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page-->
<li>Item 3</li> <--!The User will see this big picture now -->
</ul>
</div>
Javascript
$('#gallery ul li').erase the not see able < li> Item 1 </ li> from the list
Should look like this:
HTML
<div id="gallery">
<ul>
<li>Item 3</li> <--!The User will see this big picture now and Item 1 is gone-->
</ul>
</div>
User clicks thumb 2
Attract Item 2 from #pool to the gallery !but dont put it under Item 3 - no put it above Item 3, so we can scroll to the left instead of scrolling right
Should look like this:
HTML
<div id="gallery">
<ul>
<li>Item 2</li> <--! This is putted above < li> Item 3 < /li> -->
<li>Item 3</li> <--!The User will see this big picture now and Item 1 is gone-->
</ul>
</div>
Now we animate (we scroll 800px to Item 2)
$(#gallery ul).animate(right: 800);
User now only sees the image from Item 2
Javascript
$('#gallery ul li').erase the not see able < li> Item 3 </ li> from the list
Should look like this:
HTML
<div id="gallery">
<ul>
<li>Item 2</li> <--!The User will see this big picture now and Item 3 is gone-->
</ul>
</div>
You should align your code properly.
There are a lot of jQuery plugins and tutorials on how to do this. Seriously, like, tons.
Related
I have a nav element which is something like this:
<ul>
<li name='first_item'>
<ul>
<li>item 1</li>
<ul>
<li>item 1.1</li>
<li>item 1.2</li>
</ul>
<li>item 2</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
</ul>
and the code that handles the the sliding down and up is:(nav is a html element which is a parent of above)
nav.find("li").each(
if ($(this).find("ul").length > 0) {
_callback = false;
$("<span>").text("^").appendTo($(this).children(":first"));
//show subnav on hover
$(this).mouseenter(function() {
$(this).find("ul").stop(true, true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function() {
$(this).find("ul").stop(true, true).slideUp();
});
}
});
what happens is when I hover over the first_item it opens the sub menus and after it's finished sliding down them, it will open item 1's sub menus as well. I'm totally lost over this. Any help would be appreciated.
First of all, it seems you copyied the jquery without the function, so that isnt the problem:
nav.find("li").each(function(){
I think the problem is, that you travel to deep, so try this:
$(this).find(">ul")
or this:
$(this).children("ul")
From jQuery:
The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.
I'm new to Foundation 4 and am currently trying to do the following:
I'm using the section-container horizontal-nav and was wondering if anyone knows the configuration to get the section container to display its content first by default instead of hiding it until it's been clicked? So when the page loads, the section will be shown first until the user clicks on "Section 1".
<div class="section-container horizontal-nav" data-section="horizontal-nav">
<section>
<p class="title" data-section-title>
Section 1
</p>
<div class="content" data-section-content>
<ul class="side-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="divider"></li>
<li>Link 1</li>
</ul>
</div>
Tried adding active into the class attribute?
<div class="content active" data-section-content>
The section is placed as a horizontal nav-bar and I'd like for it to
be shown when the page loads as if the user has already clicked on it.
You can achieve this by giving you menu items an id and open that menu in jquery.
Section 1
then add this to the script section of your page:
$(function () {
$("#menu1").click();
});
I have a drop-down menu made up of unordered lists containing several options. Upon selection of an option, I want this option to populate the head selection box (li class="first") replacing the "I am a..." text. Then the "Go" button can be pressed to open the href for that specific option. Here is the html:
<div class="dropNavOne" class="gradient">
<ul>
<li class="first">I am a...
<ul class="menu_body1">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
<li>Option 7</li>
<li>Option 8</li>
<li>Option 9</li>
<li class="last">Option 10</li>
</ul>
</li>
</ul>
</div>
<div class="goButtonOne" class="gradient">Go</div>
If this is at all possible please let me know...thanks!
Here's a few pointers that you'll find useful in writing this. There may be plugins that directly fit your requirements, but on the other hand it sounds simple enough that you could do this yourself.
Use classes for hidden and revealed elements in your unordered list
Set up a DOM ready handler to add event handlers to your page
Attach a click event to show your menu (probably by class, so you can show many items in one go)
Attach a click event to hide your menu
Use an html injection method to modify the inner HTML of an element
You can certainly use jQuery for this. It's lovely to work with, and writing something like this would be a good first exercise.
Could anyone please let me know what i'm doing wrong.
I have:
//My HTML
<div>
<ul>
<li id="test">Main Item 1</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li>Main Item 2</li>
<li>Main Item 3</li>
</ul>
</div>
//My CSS
.list-in-list {
display:none;
}
//My jQuery
$(document).ready(function() {
$('#test').click(function() {
alert("hello");
});
});
My final goal is to show that none displayed content if you press a list item, so that it expands neatly. However, i can't seem to get that alert() appearing in any way. Should i use an id for all list items in the main list, or is it enough with a class?
/W
you can add .next function to show next ul for any li curreny click by user. you have to change id test to one class name to make effect in all click of main li
HTML would be like
<div>
<ul>
<li class="main">Main Item 1</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li class="main" >Main Item 2</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li class="main">Main Item 3</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</ul>
</div>
and JQuery function is below
$(document).ready(function() {
$('.main').click(function() {
$(this).next(".list-in-list").slideToggle();
});
});
for detail you can check link
Should i use an id for all list items in the main list, or is it enough with a class?
IDs are unique. Your JavaScript code will not work properly if you have multiple identical IDs. If you're planning on adding a similar attribute to all of your list items you'd use a class in this case (and reference it with . instead of #). In this case you'd call the click function using:
$('li.myClass').click(...);
If you only have one list, however, you can simply add the ID to the ul and use the click function as:
$('ul#myId > li').click(...);
Note that it would be marginally quicker with the classes in this case.
You'd then reference your inner ul using:
$('li.myClass > ul.list-in-list');
Or, depending on which of the above you went with:
$('ul#myId > li > ul.list-in-list');
(You'd use > here to select only the direct child. If you used ul#myId li you'd also be selecting the li elements which belong to any inner ul)
Your code works fine I do believe you have not included Jquery on your page - or maybe the path to it is not valid. Check your network tab to see if you get an http error retrieving jquery.
You can show the hidden li by doing the following:
$(document).ready(function() {
$('#test').click(function(e) {
$(this).find('.list-in-list').show();
});
});
Your code works fine:
Demo
In this case classes would be better than ids because Id's have to be unique on your page. You can use classes like in the demo below by adding a class to your outer li elements. Just change the binding from #test to whatever class you give your li elements.
$('.clickAbleLi').click(function(e) {
$(this).find('.list-in-list').show();
});
Demo
You close your </li> tag before your "list-in-list". You should close your </li> tag after your inside list ;) Like this :
<div>
<ul>
<li id="test">Main Item 1
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Main Item 2</li>
<li>Main Item 3</li>
</ul>
</div>
It sholud work but Try moving the ID attribute to the A instead of LI if you experience problems
I have a Nav bar that I created and it is 1 image with multiple image maps... is it possible to make sub menus from the image maps in the image/Nav Bar?
Instead of an image map, you should use a hidden unordered list for the sub menu (and show it with javascript when appropriate)
something like:
Menu Item
<ul class="submenu" style="display: none;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
JS:
$("#menuitem1").click(function() {
$(this).next().show();
});
try having a look at jQuery you might be able to attach a click event to an areas id which activates a hidden div with the sub menu items. www.jquery.com