On my magento site, I am getting a strange behaviour in onepagecheckout that I’d like to fix. Basically, on Step 2, after entering all the data required and I click on the continue button, the page automatically scrolls down to the bottom of the screen so instead of seeing the shipping option, you see the footer and have to scroll up to choose the shipping. So my question is how can I keep the forms in onepagecheckout “focused” so that the screen stays on it when the continue/next button is clicked. I’ve tried changing the shipping.save() function on the onclick event to something like:
function test() {
shipping.save();
document.getElementById('checkoutSteps').scrollIntoView();
}
But that clearly did not work. So how can I set the page to stay on the onepagecheckout when next is clicked?
Sorry I forgot to add, the button already has an existing click event. Basically, the button looks like this:
<button type="button" class="button" title="<?php echo $this->__('Continue') ?>" onclick="shipping.save()"><span><span><?php echo $this->__('Continue') ?></span></span></button>
I'm not sure if this matters but whenever I try to add a second function onclick (onclick="shipping.save(); testFunction();"), the second function is automatically removed.
I encountered the same problem.
In your checkout/onepage.phtml, add this code:
checkout.gotoSection = function (section, reloadProgressBlock) {
Checkout.prototype.gotoSection.call(this, section, reloadProgressBlock);
$('opc-' + section).scrollTo();
};
below
var checkout = new Checkout(....);
Hope this help.
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
In addition to Williams answer:
Most custom templates do not "rewrite" base/default/template/checkout/onepage.phtml so it would be some overhead to copy this file to your template just to add this ...
You still can use this with adding a new template file:
For your templates layout local.xml add this:
<checkout_onepage_index>
<reference name="before_body_end">
<block type="core/template" name="checkout.scroll" as="checkout.scroll">
<action method="setTemplate">
<template>checkout/onepage/scroll.phtml</template>
</action>
</block>
</reference>
</checkout_onepage_index>
Create .../template/checkout/onepage/scroll.phtml with this content:
<script type="text/javascript">
//<![CDATA[
document.observe("dom:loaded", function() {
if (typeof checkout !== 'undefined') {
checkout.gotoSection = function (section, reloadProgressBlock) {
Checkout.prototype.gotoSection.call(this, section, reloadProgressBlock);
$('opc-' + section).scrollTo();
};
}
});
//]]>
</script>
Same result, just without editing base template files.
This can also help, I simply add this code in my checkout.gotoSection and it worked fine.
gotoSection: function (section) {
section = $('#opc-' + section);
section.addClass('allow');
// added this line
section.get(0).scrollIntoView();
},
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 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 have a dual-collapsing view that, upon a button click, will make an image 'collapse' away and a text section 'collapse' open. This functionality is work. However, when I add an onclick() to the button to change the color (via classes) and font-awesome picture, there is weird functionality. Generally it works, however usually the first click upon reloading the page ONLY causes the button to change, no collapsing. What gives!?
Here is some code, comment for anything else that may be needed:
Haml button and subsequent collapsing sections:
%h2
Name
%button.btn.btn-info.pull-right{data:{toggle:"collapse", target:".buy-collapse#{ammo.id}", parent:"accordion"}, onclick:'buyChange($(this))'}
%i.fa.fa-shopping-cart
Buy
%hr
// Order Form
.collapse{class:"buy-collapse#{ammo.id}"}
-# Form is here
= image_tag "ammos/"+ammo.img, :class=>"", :class=>"img-responsive img-centered buy-collapse#{ammo.id} collapse in", :alt=>''
Internal javascript function for the button change:
:javascript
function buyChange($this) {
if ($this.hasClass("btn-info")) {
$this.removeClass("btn-info");
$this.addClass("btn-danger");
$this.html('<i class="fa fa-times"> Cancel</i>');
} else {
$this.removeClass("btn-danger");
$this.addClass("btn-info");
$this.html('<i class="fa fa-shopping-cart"> Buy</i>');
}
}
Some info about my project, rails -v 4.1, bootstrap, font-awesome
Is your document loaded? Generally, you don't want mix your html and javascript like you have here. Try adding something like the code below to the appropriate javascript file in your app/assets/javascripts folder instead:
var ready;
ready = function() {
// I'd recommend an id selector here
$('button.btn.btn-info.pull-right').on('click', function() {
// Add your code to change button and collapse form and
// whatever else you want to happen on click here.
});
};
$(document).ready(ready);
$(document).on('page:load', ready);
I am still new to javascript.
I have an application that has two buttons on the page. One is a cpu_vs_player button that displays one game and the other is a player_vs_player button that displays a different game. The problem is that all the code is located in one application.js file. There is no need to load the player_vs_player on $(document).ready(function(){}); if I were to play cpu_vs_player.
Any ideas on how I can get them to load only if I chose that game? (I am only using one route with all the information being hidden / shown based on the click).
The document.ready is nothing more than the moment after the page has rendered and the document needs to be populated with event listeners. Frankly there are multiple way of skinning this cat.
You can either do the jQuery way where you keep javascript and HTML divided:
<button id="button1">cpu_vs_player</button>
<button id="button2">player_vs_player</button>
And for JavaScript:
Assuming you have a function for each gameplay:
function cpu_vs_player() {
// start the game
}
function player_vs_player() {
// need another player
}
Add event listeners the jQuery way:
$(document).ready(function() {
$("#button1").click(function() {
cpu_vs_player();
});
$("#button1").click(function() {
player_vs_player();
});
});
OR you could use the method #Techstone shows you, though you could do it more direct. It all works though.
<button onclick="javascript:cpu_vs_player();">cpu_vs_player</button>
<button onclick="javascript:player_vs_player();">player_vs_player</button>
Adding another option you can apply
In Javascript:
var Main = {
cpu_vs_player: function() {
alert("start cpu_vs_player");
},
player_vs_player: function() {
alert("start player_vs_player");
}
}
In your HTML:
<button onclick="javascript:Main.cpu_vs_player();">cpu_vs_player</button>
<button onclick="javascript:Main.player_vs_player();">player_vs_player</button>
And yes, there is more ... ;-)
image that your two button and js definition like below
function LetsRock(Playmate) {
....
}
<input type='button' value='cpu_vs_player' id='cpu_vs_player' onclick='javascript:LetsRock(this.id);' />
<input type='button' value='player_vs_player' id='player_vs_player' onclick='javascript:LetsRock(this.id);' />
Try to use the function with parameters (i.e. 0 to cpu v/s player, 1 to player v/s player), and send from the menu page to the $(document).ready(function(){});
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());
}