I need to make a mega menu similar to one as show in image below
So far i have been able to make it work to some extent example on jsFiddle HERE.
So far i have some design issue and one functionality issue.
When i try to hide the default text for each dropdown menu //$(this).find(".nav-info").hide(); then Menu 4 & 5 doesnt show up on right side.
I am actually trying to create a menu similar to one as on this website.
One this website they also show a default text for parent menu which i dont need actually.
I modified script to show the first li of submenu it works find for Parent menu ONE, TWO but creates alighnment problem for MENU FOUR and FIVE.
I would appreciate if some can help me fix this issue...
CODE
<div class="container_16">
<div class="nav-main grid_16">
<div class="wrap-nav-media">
<ul id="nav-top-media">
<!-- ONE -->
<li class="nav-item-1">Parent Menu One
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../directors" rel="sub-1-relative-1">sub-1-relative-1</a>
</li>
<li class=""><a class="current" href="../management-team" rel="sub-1-relative-2">sub-1-relative-2</a>
</li>
<li class="last"><a class="current" href="../tems.html" rel="sub-1-relative-3">sub-1-relative-3</a>
</li>
</ul>
<div style="display: block;" class="menu-page first" id="mega-sub-1-relative-1"> <a href="../board-of-directors" title="Board of Directors" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-1</p>
</div>
</div>
<div style="display: block;" class="menu-page" id="mega-sub-1-relative-2"> <a href="../management-team" title="Management Team" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow; float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-1-relative-3"> <a href="../vision.html" title="Vision" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-3</p>
</div>
</div>
</div>
</li>
<!-- TWO -->
<li class="nav-item-2"> Parent Menu TWO
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../infrastructure" rel="sub-2-relative-1">sub-2-relative-1</a>
</li>
<li class=""><a class="current" href="..capabilities/building" rel="sub-2-relative-2">sub-2-relative-2</a>
</li>
<li class="last"><a class="current" href="..capabilities/rail" rel="sub-2-relative-3">sub-2-relative-3</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-2-relative-1"> <a href="../infrastructure" title="Infrastructure" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-1</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-2"> <a href="../building" title="Building" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-3"> <a href="/rail" title="Rail" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-3</p>
</div>
</div>
</div>
</li>
<li class="nav-item-3">THREE
</li>
<li class="nav-item-4"> FOUR
<div style="display: none;" class="inner-nav-media">
<div style="display: block; float:right;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title=" Businesses" href="../businesses">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<ul>
<li class=""> <a class="current" href="2.html" rel="sub-4-relative-1">sub-4-relative-1</a>
</li>
<li class=""> <a class="current" href="1.html" rel="sub-4-relative-2">sub-4-relative-2</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-4-relative-1"> <a href="../group.html" title="" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20110602_1-ARG.jpg" alt="">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-4-relative-2"> <a href="../advance-water-and-environmentawe.html" title="Advance Water and Environment (AWE)" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20121024_AWG-220x165.jpg" alt="Advance Water and Environment (AWE)">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
</div>
</li>
<li class="last nav-item-5">FIVE
<div style="display: none;" class="inner-nav-media">
<div style="display: block;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title="" href="">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>This is Default text when i try to hide this then this menu moves to left</p>
</div>
</div>
<ul>
<li class=""><a class="current" href="" rel="sub-5-relative-1">sub-5-relative-1</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-2">sub-5-relative-2</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-3">sub-5-relative-3</a>
</li>
<li class="last"><a class="current" href="" rel="sub-5-relative-4">sub-5-relative-4</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-5-relative-1"> <a href="/safety.html" title="" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-2"> <a href="/environment.html" title="Environment" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-3"> <a href="/community.html" title="Community" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-4"> <a href="/quality.html" title="Quality" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-4</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Add the following in the head of the document,
<!--[if lt IE 9]>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
And use the method suggested by Rachel Reveley.
li:hover ul {display: block;}
The code adds support for HTML 5 and CSS3 on older browsers. And it seems to be working perfect for me.
Unless you are supporting IE6 then you don't need JavaScript to make a drop down menu work.
If you change your structure to something more like this
<ul>
<li>Click me
<ul>
<li>This is showed when Click Me! is clicked.</li>
</ul>
</li>
</ul>
you can simply do this with your CSS
li:hover ul {display: block;}
Related
My html code like this :
<ul id="sticky-tab" class="hide-on-med-and-down">
#foreach (Sitecore.Data.Items.Item item in _stickyMenu.Children)
{
<li class="content accent-4 z-depth-2 #item.Fields[Templates.Navigable.Fields.CustomClass]" data-color="#item.Fields[Templates.Navigable.Fields.CustomClass]">
<a class="#classTriger" href="#(popupID==string.Empty?item.LinkFieldUrl(Templates.Link.Fields.Link).ToString():popupID)">
<div class="text">#item.Fields[Templates.Navigable.Fields.NavigationTitle]</div>
</a>
</li>
}
</ul>
If it generated, the result like this :
<ul id="sticky-tab" class="hide-on-med-and-down">
<li class="content accent-4 z-depth-2 red" data-color="red">
<a class="" href="/Specialties/menu1">
<div class="icon"><img src="" /></div>
<div class="text">menu 1</div>
</a>
</li>
<li class="content accent-4 z-depth-2 " data-color="">
<a class="" href="/Contents/menu2">
<div class="icon"><img src="" /></div>
<div class="text">menu 2</div>
</a>
</li>
<li class="content accent-4 z-depth-2 " data-color="">
<a class="" href="/Contents/menu3">
<div class="icon"><img src=""/> </div>
<div class="text">menu 3</div>
</a>
</li>
</ul>
I want to tracking link click with google analytics. I try like this :
<a class="#classTriger" href="#(popupID==string.Empty?item.LinkFieldUrl(Templates.Link.Fields.Link).ToString():popupID)" onclick="ga('send', 'event', 'a', 'click');">
<div class="text">#item.Fields[Templates.Navigable.Fields.NavigationTitle]</div>
</a>
But, it does not work. How can I solve this problem?
I have a page I'm trying to complete that has a tabbed inner menu system, and within them (the first and last tab) there are justified galleries
http://miromannino.github.io/Justified-Gallery/
The code works well within the first tab, but when I put it within the last tab it turns all the images into thumbnails 80px by 80px. I initially thought that perhaps this was limited to one gallery per page, so I did some testing and I was able to add another one outside of the tabs with no issue.
I did some further testing and figured out that the reason it was working in the first tab and not the last was because the first tab has an active class on it, making the div a block element (display: block) and as soon as I put active on the other tab it made the gallery work but obviously broke the tabs.
At this point I'm stuck as to what I can do to get this to work, so I'm hoping someone here can help me out a little. Below is the code, thanks!
<div class="middleContent">
<div class="container">
<div class="row">
<div class="col-sm-9 leftContent">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#orderOnline" role="tab">Menu</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#reviews" role="tab">Reviews</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#about" role="tab">About</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#photos" role="tab">Photos</a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="orderOnline" role="tabpanel">
<div class="row">
<h2>MENU</h2>
<div id="mygallery" >
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-10.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-10.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-11.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-11.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-12.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-12.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-13.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-13.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-14.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-14.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-15.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-15.jpg"/>
</a>
</div>
</div>
</div>
<div class="tab-pane" id="reviews" role="tabpanel">
<h2>Reviews</h2>
</div>
<div class="tab-pane" id="about" role="tabpanel">
<h2>About</h2>
</div>
<div class="tab-pane" id="photos" role="tabpanel">
<div>
<div>
<h2>Food</h2>
<div id="foodgallery">
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-10.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-10.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-11.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-11.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-12.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-12.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-13.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-13.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-14.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-14.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-15.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-15.jpg"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery:
<script>
$('#mygallery').justifiedGallery({
rowHeight: 300,
lastRow: 'nojustify',
randomize: false,
margins: 10
});
</script>
<script>
$(function(){
$('#foodgallery').justifiedGallery({
rowHeight: 200,
lastRow: 'nojustify',
randomize: false,
margins: 10
});
});
</script>
I am very very new to JavaScript so sorry if this is really silly.
Basically the issue is I have 2 JavaScripts, both useing ul and li tags but both need it for different thing, so how do I apply it to diffrent ul and li tags?
This is the question in more detail
I have two bits of JavaScript.
(1)
<script src="js/jquery.roundabout2.js"></script>
<script src="js/jquery.roundabout-shapes2.js"></script>
<script src="js/jquery.easing.js"></script>
<script>
$(document).ready(function() {
$('.verb ul li').focus(function() {
$('#hidden-verb').val($(this).text());
});
$('.feeling ul li').focus(function() {
$('#hidden-feeling').val($(this).text());
});
$('.adjective ul li').focus(function() {
$('#hidden-adjective').val($(this).text());
});
$('ul').roundabout({
shape: 'waterWheel',
minOpacity: -1.0,
duration: 300,
easing: 'easeOutCubic'
});
$('li').dblclick(function(e) {
e.preventDefault();
return false;
});
$('form').submit(function(e) {
e.preventDefault();
alert('Thank you for telling me that my art work is ' + $('#hidden-adjective').val() + ' ,and to improve it I should add ' + $('#hidden-verb').val() + ' and the website is ' + $('#hidden-feeling').val() + '.');
return false;
});
});
</script>'
Then (2)
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>'
Number 1 comes from http://fredhq.com/projects/roundabout/demos/form and number 2 from here http://www.twospy.com/galleriffic/example-2.html
Now you can see that both use ul and li, but (1) needs it for it's purpose and the (2) for it's purpose, but I am unable to get the it to apply different things to both. If you look at the links you will see there different purposes. I have attempted adding id's to the tags and class, but it does not seem to work.
Any help will be much appreciated.
Thank you
This is the two peices of HTML this is being applied to.
(1)
<div id="tellmeform"><form id="form2" action="" method="get">
<div class="part"> My art work is</div>
<div class="part moving adjective">
<ul class="il1" id="ul1">
<li class="li1" id="li1">creative</li>
<li class="li1" id="li1">delicate</li>
<li class="li1" id="li1">lovely</li>
<li class="li1" id="li1">stunning</li>
<li class="li1" id="li1">elegant</li>
</ul>
</div>
<div class="part">, so to imrpove I should add</div>
<div class="part moving verb">
<ul class="il1" id="ul1">
<li class="li1" id="li1">tones</li>
<li class="li1" id="li1">colour</li>
<li class="li1" id="li1">shadows</li>
<li class="li1" id="li1">faces</li>
<li class="li1" id="li1">shadeing</li>
</ul>
</div>
<div class="part">but before you go, I think the website is</div>
<div class="part moving feeling">
<ul class="il1" id="ul1">
<li class="li1" id="li1">clean</li>
<li class="li1" id="li1">stunning</li>
<li class="li1" id="li1">poor</li>
<li class="li1" id="li1"i>smooth</li>
<li class="li1" id="li1">expired</li>
</ul>
</div>
<div class="part">.</div>
<div class="part button">
<input type="hidden" id="hidden-adjective" name="hidden-adjective" value="" />
<input type="hidden" id="hidden-verb" name="hidden-verb" value="" />
<input type="hidden" id="hidden-feeling" name="hidden-feeling" value="" />
<input type="submit" value="Tell Me" name="post" id="post-it" />
</div></form></div>'
and number (2) - This is long, sorry.
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<ul id="ul2" class="thumbs noscript">
<li id="li2">
<a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #0</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #2</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
<img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #3</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
<img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #4</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">
<img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #5</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">
<img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #6</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">
<img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #7</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">
<img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #8</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">
<img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #9</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">
<img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #10</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">
<img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #11</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">
<img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #12</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">
<img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #13</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">
<img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #14</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg" title="Title #15">
<img src="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_s.jpg" alt="Title #15" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #15</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg" title="Title #16">
<img src="http://farm3.static.flickr.com/2014/2083478274_26775114dc_s.jpg" alt="Title #16" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #16</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg" title="Title #17">
<img src="http://farm3.static.flickr.com/2194/2083464534_122e849241_s.jpg" alt="Title #17" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #17</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg" title="Title #18">
<img src="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_s.jpg" alt="Title #18" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #18</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg" title="Title #19">
<img src="http://farm3.static.flickr.com/2375/2538172432_3343a47341_s.jpg" alt="Title #19" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #19</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg" title="Title #20">
<img src="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_s.jpg" alt="Title #20" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #20</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg" title="Title #21">
<img src="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_s.jpg" alt="Title #21" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #21</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">
<img src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg" alt="Title #22" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #22</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23">
<img src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg" alt="Title #23" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #23</div>
<div class="image-desc">Description</div>
</div>
</li>
</ul>
</div>
<div style="clear: both;"></div>
</div>'
You can see I have attempted to add class and id, but when I say it does not seem to work, I mean that it only applies the setting to one. For example by leaving it as ul and li on code 1, code 1 works and then code two fails, and appears in the same way as code 1. But if I put code 1 as ul1 and li1 then 1 doesent work and 2 works. Sorry if this is a little confusing. But basically I can not get them to work independently.
Sorry I would add this as a comment but don't have the option. It looks as though you need to add the classes into the script itself to get each script to relate to the correct ul and li or do you want both scripts to work on all ul and li s?
Right, I think I've got it, try changing the following:
$('#ul1, #ul3, #ul4').roundabout({
shape: 'waterWheel',
minOpacity: -1.0,
duration: 300,
easing: 'easeOutCubic'
});
$('#li1, #li3, #li4').dblclick(function(e) {
e.preventDefault();
return false;
});
and change your div structure for the waterWheel bit to:
<ul class="il1" id="ul1">
<li class="li1" id="li1">creative</li>
<li class="li1" id="li1">delicate</li>
<li class="li1" id="li1">lovely</li>
<li class="li1" id="li1">stunning</li>
<li class="li1" id="li1">elegant</li>
</ul>
</div>
<div class="part">, so to imrpove I should add</div>
<div class="part moving verb">
<ul class="il1" id="ul3">
<li class="li1" id="li3">tones</li>
<li class="li1" id="li3">colour</li>
<li class="li1" id="li3">shadows</li>
<li class="li1" id="li3">faces</li>
<li class="li1" id="li3">shadeing</li>
</ul>
</div>
<div class="part">but before you go, I think the website is</div>
<div class="part moving feeling">
<ul class="il1" id="ul4">
<li class="li1" id="li4">clean</li>
<li class="li1" id="li4">stunning</li>
<li class="li1" id="li4">poor</li>
<li class="li1" id="li4"i>smooth</li>
<li class="li1" id="li4">expired</li>
</ul>`
I would like to show a div with id "houseImages" on page load while hiding divs "landImages", "renovationImages", "UpcomingImages", and "voteForNext". Upon clicking "Landscaping", I would like to display the div "landImages" and hide div "houseImages". Obviously, I would like this functionality to continue through the list and when I click "Painting" that div would reappear. How would I do this using JavaScript?
Here is what I have so far:
<Div id="mainContent">
<h2> Our House </h2>
<div id="columnLeft">
<ul>
<li id="leftColumnPainting">
Painting
</li>
<li id="leftColumnLandscaping">
Landscaping
</li>
<li id="leftColumnRenovations">
Renovations
</li>
<li id="leftColumnUpcoming">
Upcoming
</li>
<li id="leftColumnNext">
Vote for <br>Next!</br>
</li>
</ul>
</div>
<div id="columnRight">
<div id="title">
<p> Over the course of a couple years we have done a number of projects around the house. Click on a link to your left to see the improvements! Don't forget to vote for what's next!
</p>
</div>
<div id="houseImages">
<ul>
<li>
<img src="./img/house1.jpg" />
</li>
<li>
<img src="./img/house2.jpg" />
</li>
<li>
<img src="./img/house3.jpg" />
</li>
<li>
<img src="./img/house4.jpg" />
</li>
</ul>
</div>
<div id="landImages">
<ul>
<li>
<img src="./img/land1.jpg" />
</li>
<li>
<img src="./img/land2.jpg" />
</li>
<li>
<img src="./img/land3.jpg" />
</li>
<li>
<img src="./img/land4.jpg" />
</li>
</ul>
</div>
<div id="renovationImages">
<ul>
<li>
<img src="./img/renovation1.jpg" />
</li>
<li>
<img src="./img/renovation2.jpg" />
</li>
<li>
<img src="./img/renovation3.jpg" />
</li>
<li>
<img src="./img/renovation4.jpg" />
</li>
</ul>
</div>
<div id="upcomingImages">
<ul>
<li>
<img src="./img/upcoming1.jpg" />
</li>
<li>
<img src="./img/upcoming2.jpg" />
</li>
<li>
<img src="./img/upcoming3.jpg" />
</li>
<li>
<img src="./img/renovation4.jpg" />
</li>
</ul>
</div>
<div id="voteForNext">
<p> enter in voting form here</p>
</div>
</div>
</Div>
I'd suggest changing your <a href=""> to the ID of the div you would like to show. Then you can do something like:
$("#columnleft li a").click(function(e) {
e.preventDefault();
$("columnright div").hide();
$("#"+$(this).attr("href")).show();
});
I personally like the Hide -> fadeIn effect combination. If you have a 2 buttons a 2 divs, you can toggle which one is show like this:
HTML:
<div id="a">div 1</div>
<div id="b">div 2</div>
<button id="c">show div 1</button>
<button id="d">show div 2</button>
CSS:
div{
width: 200px;
height: 200px;
border: solid 1px;
display: none;
}
JS:
$('#c').click(function() {
$('#b').hide();
$('#a').fadeIn();
});
$('#d').click(function() {
$('#a').hide();
$('#b').fadeIn();
});
See the JSfiddle: http://jsfiddle.net/HSNLN/
You attach this method to any event you can catch with jQuery, and show/hide and divs.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
None of my content appears to be showing in a web browser. I created the website in Wordpress
I am not sure whether I am missing some vital code but it seems to display the logo and the 'Services' bar but otherwise my page appears to be empty
header.php:
</head>
<body class="">
<div id="wrapper">
<div id="jump">
<p>jump to content</p>
</div>
<div class="hud-content">
<div id="content-container">
<div id="header">
<div id="logo">
<a href="/" title="Wild Lion Media">
<img src="/wildlion/wp-content/themes/child/images/logo.png" width="95" height="120" alt="Wild Lion Media" title="Wild Lion Media" />
</a>
</div>
<h1>
Wild Lion Media
</h1>
<div id="hud-toggler">
<ul>
<li>Login / Register</li>
</ul>
</div>
</div><div id="nav">
<ul>
<li id="nav-home">Home</li>
<li id="nav-dandad"><a class="nav-item" href="/dandad" title="Wild Lion Media">Wild Lion Media</a>
<div class="subnav">
<ul class="subnav">
<li>About</li>
<li>Events</li>
<li>Join</li>
<li>Latest</li>
<li>Partnerships</li>
<li>White Pencil</li>
<li class="feature">
<p class="intro">Get your voice heard</p>
<p>Wild Lion Media Membership: It’s classy, exclusive, well connected – everything you could ask for from a private member’s club. Ok, we don’t have a pool on the roof, but just wait till you see the size of our archive.</p>
<p class="readmore">Read More</p>
<img src="#" width="167" height="167" alt="Nav Yellow Pencil" class="feature-pic"/>
<ul class="feature-links">
<li><a href="/dandad/join/individual-membership" title="Individual Membership">Individual<br />
Membership</a></li>
<li><a href="/dandad/join/d-ad-education-network" title="Education Network">Education<br />
Network</a></li>
</ul>
</li>
</ul>
</div> </li>
<li id="nav-inspire"><a class="nav-item" href="/inspiration" title="Inspiration">Inspiration</a>
<div class="subnav">
<ul class="subnav">
<li>Inspired by…</li>
<li>Watch & Listen</li>
<li>Have Your Say</li>
<li>Features & Opinion</li>
<li>Profiles</li>
<li>Archives & Collections</li>
<li class="feature">
<p class="intro">Wild Lion Media<br/>President’s Lectures</p>
<p>Chosen by the President of Wild Lion Media speakers represent the best in their creative fields and inspire discussion and debate.<br/></p>
<p class="readmore">Book your tickets</p>
<img src="#" width="167" height="167" alt="President’s Lectures" class="feature-pic"/>
</li>
</ul>
</div> </li>
<li id="nav-awards"><a class="nav-item" href="/awards" title="Awards">Awards</a>
<div class="subnav">
<ul class="subnav award-sections">
<li>
<p class="intro">Professional Awards</p>
<p>Yellow Pencils are recognised the world over as a symbol of true creative achievement. Year on year the Wild Lion Media Annual showcases the very best work and continues to provide an unrivalled source of creative inspiration.</p>
<ul>
<li>Professional</li>
<li class="new">2012</li>
<li>2011</li>
<li>2010</li>
<li>Archive</li>
</ul>
</li>
<li>
<p class="intro">Student Awards</p>
<p>Creatives the world over value the Wild Lion Media Student Awards above any other. Winning a Wild Lion Media Student Award truly marks you out as one of the best. Take your first step in becoming a creative superstar.</p>
<ul>
<li>Student</li>
<li class="new">2012</li>
<li>2011</li>
<li>2010</li>
<li>Archive</li>
</ul>
</li>
</ul>
</div> </li>
<li id="nav-talent"><a class="nav-item" href="/talent" title="Talent">Talent</a>
<div class="subnav">
<ul class="subnav">
<li>Spotlights</li>
<li>Portfolios</li>
<li>New Blood</li>
<!-- <li>Graduate Placement Scheme</li>-->
<li>Graduate Academy</li>
<!-- <li>Jobs</li>-->
<li class="feature">
<img src="#" alt="Graduate Academy - Where the creatively brave shine" class="fullpic" />
</li>
</ul>
</div>
</li>
<li id="nav-learning"><a class="nav-item" href="/learning" title="Learning">Learning</a>
<div class="subnav">
<ul class="subnav">
<li>Case Studies</li>
<li>Commentary</li>
<li>Guides</li>
<li>Talks</li>
<li class="new">Projects</li>
<li>Workshops</li>
<li>Professional Development</li>
<li class="feature">
<img src="#" alt="Education Network Membership. One yellow pencil. Lots of benefits." class="fullpic" />
</li>
</ul>
</div> </li>
<li id="nav-search">
<form action="/search" method="get" accept-charset="utf-8">
<p><label for="search">Search</label><input type="text" name="q" value="Search" id="search" class="tfield" tabindex="5" /></p>
<p><input type="submit" id="search_submit" value="Go" tabindex="6" /></p>
</form>
</li>
</ul>
</div> <div id="content">
<div class="panel-10">
<p class="widget-title">Services</p>
<ul class="powerlinks pl-feature extended">
<li class="first">
<img src="/wildlion/wp-content/themes/child/images/video_production.jpg" width="176" height="104" alt="Video Production" title="" />
<p>
<a href="#">
<span>
<strong>Video Production</strong>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
Every element of your production can be designed to meet your needs.
</span>
</a>
</p>
</li>
<li>
<img src="/wildlion/wp-content/themes/child/images/talking_heads.jpg" width="176" height="104" alt="Talking Heads" title="" />
<p>
<a href="#">
<span>
<strong>Talking Heads</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
A simple but effective way of communicating a message and introducing key players.
</span>
</a>
</p>
</li>
<li>
<img src="/wildlion/wp-content/themes/child/images/motion_graphics.jpg" width="176" height="104" alt="Motion Graphics" title="" />
<p>
<a href="#">
<span>
<strong>Motion Graphics</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
Whether 2D logo design or 3D animation and visual effects, anything is possible.
</span>
</a>
</p>
</li>
<li class="last">
<img src="/wildlion/wp-content/themes/child/images/web_videos.jpg" width="176" height="104" alt="Web Videos" title="" />
<p>
<a href="#">
<span>
<strong>Web Videos</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
From social networks to blogs and news feeds, get your viral out there.
</span>
</a>
</p>
</li>
<li class="first">
<img src="/wildlion/wp-content/themes/child/images/live_events.jpg" width="176" height="104" alt="Live Events" title="" />
<p>
<a href="#">
<span>
<strong>Live Events</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
Why limit your audience to the venue capacity? Capture your event in style.
</span>
</a>
</p>
</li>
</ul>
</div>
<div class="panel-10">
<div class="panel-8 alpha">
<div class="panel-2 alpha">
</div>
</div>
</div>
<div class="panel-10" id="footer">
<div class="panel-2">
<p>© 2012 Wild Lion Media Limited </p>
</div>
<div class="panel-2" id="back-to-top">
<p>Back to the top</p>
</div>
</div>
<div class="clearing"></div>
</div>
</div>
<div class="overlay"></div>
On line 5 of your stylesheet you have:
#nav,
#hud,
#hud-toggler,
#imagebar,
#jump,
div #breadcrumb,
#quick-jump,
#sitemap,
#external-links,
#back-to-top,
ul.powerlinks,
ul.article-nav,
#sidenav ul,
p.return,
a.doc-pdf,
a.doc-word,
div.logo a {
display: none;
}
This is causing everything to be hidden. Remove that line and you'll see your content.
In your style.css (line 5) you have a rule:
#nav, #hud, #hud-toggler, #imagebar, #jump, div #breadcrumb, #quick-jump, #sitemap, #external-links, #back-to-top, ul.powerlinks, ul.article-nav, #sidenav ul, p.return, a.doc-pdf, a.doc-word, div.logo a {
display: none;
}
It hides all your content.