Finally designed a nice navigator for wordpress, but now the Links won't stay highlighted when click since it goes to different page. I need help with javascript code to change
<li class='last' id="meet">
<a href='?page_id=7'><span>Meet Dr. Ayala</span></a>
</li>
to become this
<li class='active' id="meet">
<a href='?page_id=7'><span>Meet Dr. Ayala</span></a>
</li>
I am sure I need <body onload="onload()"> on the body tag. Can someone please explain how to fix this?
Edit: I managed to find a working function but needs to be converted to onload instead of clicking button
<script>
$(document).ready(function(){
$("button").click(function(){
document.getElementById("meet").className = "active";
});
});
</script>
Finally got it working
<script>
function onload() {
document.getElementById("meet").className = "active";
}
window.onload = onload;
</script>
you can use jquery to add/remove class
e.g
$("#meet").addClass("Active");
$("#meet").removeClass("Active");
I think you are using php.
You could put your page number navigation in you body tag, or other solutions ..
url: http://mydomain?page_id=7
Pick op with $_GET['page_id']
Put something in your body tag
<body id="page_<?php echo $_GET['page_id'];?>">
Then in the JavaScript you can read th id of the body tag. Split out the number. Add some classes to your menu
<li class='menu_7'></li>
With the number you extract from the body tag id, you can target the menu class.
Hope that scenario will help you some. You can also add a static number in your page. That way you know for sure that you get a value. This is if your browser has to load a new page.
Other scenario could be an iframe or Ajax
$(document).ready(function () {
var nr = $("body").attr("id").split("_");
$(".menu_" + nr[1]).addClass("active");
});
Give this a go, it will find the current link, and jump back to its parent and give it a class of active.
$(document).ready(function(){
var urlBits= document.URL.split('/');
var current = urlBits[urlBits.length-1];
$('a[href="'+current+'"').parent('li').addClass('active');
}
Related
I have a website where there is a side menu filled with links. On top of that are some Next and Prev buttons for the user to switch between the menus of links.
I want to change this so that the menu will automatically change after x amount of time.
I thought something like this would do it:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function delayer(){
window.location = "http://www.google.com" }
</script>
</head>
<body onLoad="setTimeout('delayer()', 1000)">
</body>
</html>
Basically, instead of opening google, I want the page to run the "Next" button which is represented by:
<div class="navBtns mar9 s3">
<span></span>
<span></span>
</div>
Any idea on how to do this? Thanks!!
If you'd like to "click" the next button, then you can do that programatically with JS.
var nextbutton = document.getElementsByClassName('next');
nextbutton.click();
Getting element by class like that only works on post-IE8 browsers.
<span></span>
This hyperlink does nothing by itself. Somewhere on the site, there is a javascript function bound to the click event of this link. You need to either trigger a click event on the link, or call the javascript directly.
Without seeing the rest of the javascript / knowing what frameworks are in use on the page, it's impossible to give a more precise answer.
-- EDIT --
Based on your comment, you may be able to do something along these lines:
<script type="text/javascript">
setTimeout(function() {
$('#page_HOME .slider .next').click();
}, 1000);
</script>
As long as those hyperlinks are contained inside the slider element, the above code will trigger a change in your side menu after 1000 milliseconds
You could find the HREF of the link you want based on the class name of the link, using plain old JS.
window.location = document.querySelector(<link class name>).getAttribute("href");
This will redirect the browser to whatever the href attribute is set to.
If you wanted to keep a function like you have, you could use this:
function delay(link, time) {
setTimeout(function() {
window.location = document.querySelector("." + linkClass).getAttribute("href");
}, time);
}
Then to use it, just say:
delay("next", 5000); // go to the href of the link with the class "next" after 5 seconds.
I've got the following script. I've got 3 div's that are all display: hidden; that I want to drop down from the top of the page using slideToggle.
<script type="text/javascript">
$(document).ready(function(){
$("#irN").click(function () {
$('#irN_dd').slideToggle();
});
$("#myir").click(function () {
$('#myir_dd').slideToggle();
});
$("#myirmsg").click(function () {
$('#myirmsg_dd').slideToggle();
});
});
</script>
HTML:
<a id="irN">irN</a>
<a id="myir">myir</a>
<a id="myirmsg">myirmsg</a>
This script works great. The only issue is that all 3 can be opened at the same time. I only want 1 to be able to be open at any given time. So...how would I modify the script to do the following..
... if none are open and the viewer clicks one of the id's, it opens....
... if one of the divs are open and the viewer clicks another one of the id's, it slides the one open up and then slides the new one down.
Thanks in advance!
Edit in regard to comments
If you didn't want to check the markup etc, you could use something like the following to acheive what you wanted:
$("#irN, #myir, #myirmsg").click(function () {
var example = "#" + this.id + "_dd";
$(example).siblings("div[id$=_dd]").slideUp()
.is(":visible")
? $(example).delay(1000).slideToggle()
: $(example).slideToggle();
});
This fits all your functions into one concise event (could probably look nicer but I'm too tired to think of anything better right now).
jsFiddle example
I am trying to set up virtual pageviews for when a user clicks on buttons that are currently hosted in a lightbox.
I know that on a normal page, I just need to add the snippet in the <a> tag, but was wondering if the functionality is different inside a .js lightbox.
Do I need to add the snippet somewhere in the container or would I be okay with simply adding to the <a> tag for these links as well?
I will add the following:
I want to track clicks on the submit button at the base of this form:
http://www.teksystems.com/contact-us
I am confident that I can place the code in the <a> tag there.
But the two other links are hosted one on a side bar (accessible from any page) & the other in the lightbox that shows when you click "Send Us a Message"
Please tell me I can just add the snippet to the <a> tag on all of the links (because that is what I want to track is clicks). Thanks so much guys, here is what I have come up with if I can place these in the <a> tags:
<a onclick="javascript: _gaq.push(['_trackPageview', '/header-thank-you/]);" href=”#”>Submit</a>
<a onclick="javascript: _gaq.push(['_trackPageview', '/virtual-contact/]);" target="_blank"><span class="link-text">Send us a message</span></a>
<a onclick="javascript: _gaq.push(['_trackPageview', '/header-thank-you/]);" href=”#”></a><span class="link-text">Submit</span></a>
Here is an example of where I think a function code may go in the js container:
`$(newButtonAnchor).click(function () {
//alert('clicked');
$(submitButton).click();
return false;
});
var newButtonSpan = document.createElement('span');
$(newButtonSpan).attr('class', 'text');
$(newButtonSpan).html($(submitButton).val());`
I would highly recommend to encapsulate all this_gaq stuff in to separate functions in a central lib. Otherwise you are likely facing a maintenance nightmare on the long run.
Besides: if you have an onclick parameter in your <a thus doesn't need javascript: as "protocoll", this is javascript: <a onclick="_gaq.push...
The jQuery aproach is the best from my point of view:
<style>
.gatracker {} /* does nothing but mark the elements */
</style>
<a target="_blank" href="go/some/where" class="gatracker"><span class="link-text">Send us a message</span></a>
var ga_clickTracker = function(anchor) {
... some code ...
_gaq.push(['_trackPageview', $(anchor).attr('href')]);
...
};
... onload ...
// put an eventhandler on all elements with class gatracker
$('.gatracker').click(function () {
ga_clickTracker(this);
return true; // should proceed!!
});
Im trying to fade out a DIV when clicking a link within the DIV itself. Here is my code:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeTo("slow", 0);
});
The reason I'm not specifying the ID directly is because I want to use this to fade out multiple DIVs with different ID's.
The above code was returning the ID when I setup an alert but not fading the DIV out or anything else I tried to so... any help here would be appreciated. The HTML is:
<div id="First-Block" class="item">
<p>text here</p>
<p>Back</p>
</div>
Thank you!
You should use fadeOut("slow") instead.
Try changing your code to:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeOut("slow");
});
To improve this even further you can shorten your code to:
$(".hideinfo").click(function() {
$(this).closest(".item").fadeOut("slow");
});
Just to mention as well that by clicking on an anchor it will jump to the top of the page using #. I would take a look at .preventDefault()
You can also check out the API here -> http://api.jquery.com/fadeOut/
Use fadeOut() instead since your primary goal is to affect the overall visibiltity not a given opacity.
jsBin demo
$(".hideinfo").click(function( e ){
e.preventDefault(); // prevent default anchor link behavior
$(this).closest('.item').fadeTo(400, 0);
});
Additionally try to wrap the above into a document ready :
$(function(){
// code here.
});
I'm using Colorbox to show the html content of hidden divs on my page. I can get this to work perfectly with the following:
$("a.colorbox").colorbox({width:"600px", inline:true, href:"#344"});
This will show the div with the ID of 344.
However, because I'm trying to build a scalable and dynamic page with WordPress, I want to be able to grab the ID of my divs through a function, rather than hard code them in the jquery call.
I modified Jack Moore's example:
$("a[rel='example']").colorbox({title: function(){
var url = $(this).attr('href');
return 'Open In New Window';
}});
so that it looks like this:
$(".colorbox").colorbox({width:"600px", inline:true, href:function(){
var elementID = $(this).attr('id');
return elementID;
}});
The problem with this is that the href property of the colorbox function is looking for a string with a # mark infront of the ID. I tried various ways of concatenating the # to the front of the function, including the # in the return value, and concatenating the # to the elementID variable. No luck.
I also tried using the syntax in Jack's example (with no luck) so that my return statement looked like this:
return "#'+elementID+'";
I think my basic question is: How do I use colorbox to show hidden divs on my page without hardcoding everything?
Thanks for your help,
Jiert
I didn't really like any of the answers given above. This is how I did it (similar but not quite the same).
I also fully commented it for people a bit new to Javascript and the colorbox plug in.
$(document).ready(function() { //waits until the DOM has finished loading
if ($('a.lightboxTrigger').length){ //checks to see if there is a lightbox trigger on the page
$('a.lightboxTrigger').each(function(){ //for every lightbox trigger on the page...
var url = $(this).attr("href"); // sets the link url as the target div of the lightbox
$(url).hide(); //hides the lightbox content div
$(this).colorbox({
inline:true, // so it knows that it's looking for an internal href
href:url, // tells it which content to show
width:"70%",
onOpen:function(){ //triggers a callback when the lightbox opens
$(url).show(); //when the lightbox opens, show the content div
},
onCleanup:function(){
$(url).hide(); //hides the content div when the lightbox closes
}
}).attr("href","javascript:void(0)"); //swaps the href out with a javascript:void(0) after it's saved the href to the url variable to stop the browser doing anything with the link other than launching the lightbox when clicked
//you could also use "return false" for the same effect but I proffered that way
})
}
});
And this is the html:
<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
<p>Lightbox content goes here</p>
</div>
I think it would work with multiple lightboxes on the one page but I haven't tested it with that.
I'm facing the same issue. What does your html look like? meaning, how did you structure your "divs"
Mine looks like this:
Javascript:
<script>
$(document).ready(function () {
$("a.colorbox").colorbox({ width: "50%", inline: true, href: function () {
var elementID = $(this).attr('id');
return "#" + elementID;
}
});
});
</script>
And the html looks like (I tried changing the display:none):
<a class='colorbox' href="#">Inline HTML</a>
<div style="display:none">
<div id="pop">
This data is to be displayed in colorbox
</div>
</div>
return "#" + elementID;
will have the desired effect as David says.
This is the way I got it to work
HTML: (taken from the example in one of the answers)
<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
<p>Lightbox content goes here</p>
</div>
Javascript:
$('a.lightboxTrigger').click(function(){
var ref = $(this).attr("href");
$.colorbox({ html: $(ref).html() });
$.colorbox.resize();
});