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.
Related
OK so I am trying to build my own website using HTML templates and well i created a few additional pages of my own to incorporate to the template however and I linked them together well i thought i did and when i click the button linked to my created pages it does nothing it does not even refresh the page.
ill put a snippet of the part of the code i have problems with
<div class="col-lg-4 course_col">
<div class="course">
<div class="course_image"><img src="images/Physics.png" alt=""></div>
<div class="course_body">
<div class="course_title">Physics</div>
<div class="course_info">
<ul>
<li>Edward Nkadimeng</li>
<li>Grade 12</li>
</ul>
</div>
<div class="course_text">
<p>Physics Curriclum.</p>
</div>
</div>
</div>
</div>
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.
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.
I try make a transition fade page with div content, this is my horizontal header menu
<ul id="navigation" class="select">
<div id="teste">
<li><a id="link-home" href="#home">Home</a></li>
<li><a id="about" href="#about">about</a></li>
<li><a id="contact" href="#contact">contact</a></li>
</div>
and this is the example of content
<div id="home">
<h2>this is home</h2>
</div>
<div id="about">
<h2>this is about</h2>
</div>
<div id="contact">
<h2>this is contact</h2>
</div>
I need that #home is showing the homepage, and other hidden, when you click on the link to use the fade effect to the next page (which is the case in div) .
what is the best way? css3 or jquery? or both? Can someone help me make this script?
If I understand your question correctly, you want the navigation to fade in the new content rather than linking to a different page. In that case, either CSS3 or jQuery could work, but I would recommend jQuery because it is browser backwards compatible. Anything older that IE 9 will not interpret the CSS3 transitions. Plus, there is not a good way to detect clicks in CSS3 (see this question), so you'd end up using jQuery there anyway. Here is the code:
Menu:
<ul id="navigation" class="select">
<div id="test">
<li><a id="link-home" href="#">Home</a></li>
<li><a id="link-about" href="#">about</a></li>
<li><a id="link-contact" href="#">contact</a></li>
</div>
</ul>
Content:
<div id="home">
<h2>This is home.</h2>
</div>
<div id="about">
<h2>This is about.</h2>
</div>
<div id="contact">
<h2>This is contact.</h2>
</div>
jQuery:
$(document).ready(function () {
var animTime = 600;
$("#about").hide();
$("#contact").hide();
$('#link-home').click(function() {
$("#about").fadeOut(animTime);
$("#contact").fadeOut(animTime);
$("#home").delay(animTime).fadeIn(animTime);
});
$('#link-about').click(function() {
$("#home").fadeOut(animTime);
$("#contact").fadeOut(animTime);
$("#about").delay(animTime).fadeIn(animTime);
});
$('#link-contact').click(function() {
$("#home").fadeOut(animTime);
$("#about").fadeOut(animTime);
$("#contact").delay(animTime).fadeIn(animTime);
});
});
This should work with any code you already have. Just make sure your ids in the markup match the ids in the jQuery and you will be good to go. If you want to adjust the fade in time, just change the value of animTime. This number measures the animation time in milliseconds. The actual time the animation takes will be double the animTime because the other div's are animated out and then the new one is animated in.
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.