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.
Related
When the user clicks read more, I want the page to change to the new page (News.html) and then scroll down a specific amount so that it lines up with the article, but what's happening is that when you click read more, the page lowers a specific amount and then changes to the top of the news.html page
<article>
<h3>Is Joe Hart right for Torino?</h3>
<img src = "News_Images/Joe_Hart_Torino.jpg" alt = "Joe" width="225" height="150">
<button class = "btn btn-block btn-primary" onclick ="Change(); scrollWin();">
<p>Read</p>
</button>
</article>
<script>
function Change(){
document.location.href = "News.html";
}
</script>
<script>
function scrollWin() {
window.scrollBy(100, 175);
}
</script>
You can use fragment for instance #content. Put in appropriate place on the
News.html page and update your function to something like
function Change(){
document.location.href = "News.html#content";
}
Btw when you click only one onclick event occurs it's not supposed to occur multiple events and in your case both functions are executed, just moving takes time and you see scrolling first. Using scroll with hardcoded value is not good idea, you'll need to update it every time you update content of News.html
**UPDATE**
procrastinator is right, see comment below, just use anchor if it's applicable for you.
When you move to another page, javascript reloads and does not continue execution from where you left off.
A solution to your problem could be using a request parameter.
Change your function to this:
function Change(){
document.location.href = "News.html?scroll=yes";
}
And in your News.html page, add this code to the page's onload event:
var url = new URL(window.location.href);
var param = url.searchParams.get("scroll");
if (param == "yes")
window.scrollBy(100, 175);
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
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');
}
index.php
<html>
<head>
<title>My Title</title>
<script type="text/javascript">
function getLink(data) {
document.getElementById("box").innerHTML="This is "+data;
}
</script>
</head>
<body>
Home<br />
Profile<br />
Message<br />
Setting<br />
<hr />
<div id="box"></div>
</body>
</html>
Output
Home
Profile
Message
Setting
This is Home
As the code says my Div contents updated when i click any of the link but the problem is that when user goes back by clicking Back Button of Browser the content of my Div donot changes.
I want that either user Goes Back, Goes Forward or he directly puts the path in the address bar www.*****/index.php#profile the content of my Div should be change.
Note
I used document.location.hash to get the value of hash like this :
<head>
<script>
var hashValue=document.location.hash;
alert(hashValue);
</script>
</head>
but it works only when user goes back and then refresh the page
Plz help me how can i achieve this :(
You need to use hashchange event:
function hash_changed() {
var data = document.location.hash.substr(1);
var box = document.getElementById("box");
if (data) {
// inner page
box.innerHTML="This is " + data;
}
else {
// homepage
box.innerHTML = "";
}
}
window.onhashchange = function () {
hash_changed();
};
window.onload = function () {
hash_changed();
};
Also when you are using hashchange event, there is
no need to set onclick for your links:
Home
Profile
Message
Setting
When user click on a link, the hash automatically changes (with href attribute of link),
and hashchange event get fired.
Check DEMO here.
First Time
When a user come to your page for the first time with a hash:
http://fiddle.jshell.net/B8C8s/9/show/#message
We must show the wanted page (message here), so we must run hash_changed() function
we declare above, at first time. For this, we must wait for DOM ready or window.onload.
Check the HTML5 history API. It allows you to work with the browser history
HTML5 history api
$(window).on('hashchange', function() {
alert(location.hash);
});
or window.onhashchange event if you don't want to use jQuery
If you're going to be using AJAX, you'll really want to look into using jQuery instead of raw javascript unless your intention is educational. jQuery is just a mainstay of the web now.
If you must use those hashes...
Use jQuery Special Events, and use the hashchange event:
<a href='#home'>Home</a>
Script:
$(window).on('hashchange', function() {
$('#box').html("This is "+event.fragment);
});
However, for your scenario...
You don't need to use those # values at all as you're passing the values in your function arguments anyway according to the code you provided, just do this:
Home<br />
Alternatively (and preferably, as you're using AJAX according to the tags) you can use jQuery and its builtin selector click events which use Event Listeners:
<a href='javascript:void();' class='divLink' id='home'>Home</a><br/>
Script is this easy:
$('.divLink').click(function(){
$('#box').html("This is "+$(this).id());
}
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!!
});