I've been struggling all day to make a nav bar that applies certain styles to the link that is currently in use (so if you're on the 'about' page the 'about' link is styled differently to the rest).
I have finally managed to do this in jsfiddle now but when I apply the same code in my text editor and then preview the file in the browser the relevant effect doesn't work, even though it does in JSfiddle.
I've done a fair bit of research but cant find out why, I don't think I have any invisible characters anywhere and ive set the fiddle to 'no wrap in head' and included a document ready command in the script but still nothing.
If anyone could have a look and lend some advice that would be really appreciated, this is driving me nuts!
Fiddle is here: http://jsfiddle.net/smokescreen/jkLam/
This is my script code:
<script type="text/javascript">
$(document).ready(function() {
$('li a').click(function(e){
$('a').removeClass('current');$(this).addClass('current');});
});
</script>
Oh and the problem is that although in the fiddle when you click on a link it is highlighted green with white text until you then click on another link when previewed in browser this doesn't happen.
The hover effect still works so the link shows up green with white text when hovered over but even when clicked once the mouse is moved away the link reverts to its original state even though it has been clicked and should now be green with white text?!
Add this inside of your <head> element:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Update Try removing the class from the element with the class:
$(document).ready(function() {
$('li a').on('click', function(e){
$('.current').removeClass('current');
$(this).addClass('current');
});
});
Since you didn't get any js error it seems that your css rule for .current class is less important than some other css rule. In order it to take an effect add the !important behind the css values like
.current p{
color: white!important;
background-color:#2d7a78!important;
}
ok guys thanks for all your help, im not exactly sure who's answer helped as Im a bit confused but it now works with the following code (i'll go back and tick whoever's answer ended up helping the most - but thanks to all for your help, the guys on this site really are great!!)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#nav_bar ul li a').click(function(e)
{$('a').removeClass('current');$(this).addClass('current');});});
</script>
For those wishing to know the solution I think I needed to reference the div the list was in and not just a list so adding #nav_bar before the ul li a seems to have solved the problem
Related
I have a problem I cant figure out. So hope someone can help me.
I have this code in the footer of an iframe:
<script type="text/javascript" src="https://sinsio.dk/iframe-resizer-master/js/iframeResizer.contentWindow.min.js" defer></script>
<script>
jQuery( ".sidebar a" ).click(function() {
window.parentIFrame.size(1250);
jQuery('.content').css('display', 'none');
});
</script>
I want to resize an iframe and hide some content when clicking a link in the sidebar.
Scenario 1 (working):
If I only have window.parentIFrame.size(1250) in the click function it resizes the iframe.
Scenario 2 (working):
If i add alert(jQuery(this).attr('class')); to the function it resizes and alert the class from the clicked element. Did this to test if jQuery worked - it did.
Scenario 3 (not working but needed):
If I instead of the alert add jQuery('.content').css('display', 'none'); it removes the content div as i want but the resize no longer works.
Any ideas what is wrong? Doesn't make sense to me.
Kind regards,
Michael
I had a conflict with a height attribute on the body element of the iframe. Removing this was the solution.
Thanks for taking the time to look at my post.
Kind regards,
Michael
I am using Javascript to hide a search box until a box is clicked. That works fine.
However when the page is first loaded, you can see the search box there and then it disappears once the page has fully loaded.
How can I make it hide and not show at all until my button is clicked..
This is the Javascript:
<script type="text/javascript">
$(function(){
$(".search").hide();
$(".clicktosearch").on("click", function(){
$(".search").slideToggle("600");
.search is the actual search box
.clicktosearch is the box the user must click for the actual search box to show up.
They only thing I have tried is to move the Javascript above the html box but, to no luck, now I am asking you all on SOF.
You need to use
display:none
in the CSS to hide it initially. The javascript only executes after the page has loaded so you will always see it briefly before the javascript kicks in.
This is what you need:
CSS
.search { display:none;}
JS
$(".clicktosearch").on("click", function(){
$(".search").slideToggle("600");
});
I removed $(".search").hide(); because it's unneeded and may cause other problems. (JQuery doesn't need to hide something that's already hidden via CSS.)
BTW: If there's only one element that matches .search, it should really be an id and so #search. Same goes for .clicktosearch.
Hide it using css .
.search { display:none;}
The reason for this happening is the javascript getting loaded after the css and HTML take affect.
Hide it using CSS, the time lag before the div hides will be less.
You have the .hide inside of document.ready, $(function(){ is short for $(document).ready(function() {
So just put it before the document.ready and it should work...
<script type="text/javascript">
$(".search").hide(); //moved this line too here
$(function(){
$(".clicktosearch").on("click", function(){
$(".searchr").slideToggle("600");
although, What I personally would prefer is just in your css hide it.
Like so,
.search { display: none; }
You'll have to touch the CSS.
.search {
height: 0px;
}
Then in your JavaScript:
$(".clicktosearch").on("click", function(){
$(".search").slideToggle("600");
});
I need to create a log in popup on mouse-over on a link lust like CodeProject
Sign In link works.
In my code the log in popup is not appearing on right place and mouse over is not working properly. But I want same as the code project log in popup..
How I can achieve this..
Any suggestion is appreciated..
When I read your question, the following came to mind:
http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/
It "looks" similar to Code Project's solution, however behavior-wise, it does require minor modification; i.e. It triggers on 'click' instead of the hover/mouseover that you want.
Hopefully its somewhat useful.
first of all ...try this..
.loginpopup{display:none;....Your another style}
.loginpopup:hover{display:block;....Your another style}
I guess something like this will work, with jQuery of course.
<style>
#popup {
display: none;
}
</style>
<script>
$("#yourlink").mouseenter(function () {
$("#popup").show();
});
</script>
<div id="popup">Your popup</div>
<a id="yourlink" href="whatever">http...</a>
So I currently have two toggle boxes set up and there will be more soon, I'd like to keep the JS pretty simple and not have a new script for each area, but whenever I attempt to toggle in one place it applies the function to both other the toggle-content boxes I have set up.
In order to see both areas, open the first one and close it before opening the second so a product is added to the Recently Viewed box
http://www.coreytegeler.com/bolivares/shop/pablo-ribbed-winter-skully/
http://www.coreytegeler.com/bolivares/shop/salvador-crewneck-sweater-copy/
Here's what I have in place now:
$(window).load(function(){
$('.toggle-link').click(function(e){
$('.toggle-content').slideToggle();
e.preventDefault();
});
$(".toggle-link div").click(function()
{
$(".toggle-link div").toggle();
});
});
I tried using $(this).find('.toggle-content').slideToggle(); but still no luck.
I know this is a pretty easy fix but just can't figure it out.
Any help would be great!
$(document).ready(function(){
$('.toggle-link').click(function(e){
$(this).closest("ul").children('.toggle-content').slideToggle();
$(this).children('div').toggle();
});
});
First visit this page and hover your mouse over the menu:
http://milabalami.com/saved/2/index.php
Then visit this Wordpress page where I have implemented the exact same code:
http://milabalami.com
When you hover your mouse over the Wordpress menu, you will see that the slider does not show up. Why? I can see that the page gives an error stating:
$ is not a function
http://miladalami.com/wp-content/themes/sandbox/js/custom.js
Why is that? Its the exact same code that worked perfectly on the other page. I dont understand why it is giving that error on the Wordpress page, and not on the other one where the slider works. Anyone that could assist me in solving this puzzle?
Puzzle solved by Yi Jiang.
It looks like somewhere along the way, the $ got overridden. You can still use your code, however, by using jQuery instead of $ -
jQuery(document).ready(function($) {
$("#featured").easySlider({
speed: 400
});
$("#menu ul li a[class!='current']")
.css( {backgroundPosition: "200px 2px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 2px)"}, {duration:400})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(200px 2px)"}, {duration:400})
})
});
It's a stopgap measure, however. You should combine all your code into a single file, instead of separating them out like they are right now, and reduce your dependency on plugins.