I have this code.
If a user press on lets say burger and add it into session basket. The reload of page doesn't open the current Window View(Toggle)
How can I make it open the current again on reload...
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
This is how to show/hide the text.
<div id="sandwich" class="hidden">
Here you go 1 </div>
<div id="burger" class="hidden">
Here you go 2 </div>
Things like this are not persistent across page reload / refresh.
There are two basic approaches to it:
Session cookie and session on server, communication via AJAX
Store all in a cookie
Both require some extra work, but it's unavoidable.
For the cookie part, there's a nice jQuery plugin called jquery.cookie.
Related
The css property which is updated in the javascript does not stay when on click is triggered from html.
Javascript:
<script type="text/javascript">
function Redirect() {
window.location.replace("http://127.0.0.1:5000/testlink");
document.getElementsById('tab1').style.cssText = 'color:blue; font-size:22px;'}
</script>
HTML:
<input type="radio" name="tabset" id="tab1" aria-controls="rawdata"onclick="Redirect()">
Raw Data
Once the tag is clicked, the css property changes appears and goes away once the windows refreshes
Once the radio button is selected, you can set it to a local storage and then check it when the page is first loaded.
$(document).ready(function() {
var hasClick = localStorage.getItem("hasClick");
if(hasClick == true){
document.getElementsById('tab1').style.cssText = 'color:blue; font-size:22px;'}}
Javascript:
<script type="text/javascript">
function Redirect() {
sessionStorage.setItem("hasClick", true);
document.getElementsById('tab1').style.cssText = 'color:blue; font-size:22px;'};
window.location.replace("http://127.0.0.1:5000/testlink");
</script>
HTML:
<input type="radio" name="tabset" id="tab1" aria-
controls="rawdata"onclick="Redirect()">
That wont work, you will need to save these changes somewhere, for example:
Cookies
Local storage
Database
you save your change somewhere in these 3 saving options and then write a javascript code on window load to check if there is a color setting availaible and then change your tag color
Maybe you would prefer to do ajax? This way you can make a http request to the backoffice without the lost of your page state. Then your css property change will apply after your request.
I have set session, and whant to display popup only once when user enters site, But my popup is displaying all time, Below is my code -
<?php
Mage::getSingleton('core/session')->setWall('1');
$wall = Mage::getSingleton('core/session')->getWall();
if($wall =='1'){ ?>
<script>
jQuery(document).ready(function() {
jQuery('#earn-reward-box').show();
//jQuery('#earn-reward-box').delay(000).fadeOut();
});
</script>
<div id="earn-reward-box-main" style="display:block">
<div id="earn-reward-box" class="xmus-box">
<div id="earn-reward-close"> </div>
<a href="<?php echo Mage::getBaseUrl()?>christmas">
<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);?>wysiwyg/deal.png" />
</a>
</div>
<div id="earn-reward-overlay"> </div>
</div><script>
jQuery('#earn-reward-close').click(function(){
jQuery('#earn-reward-box-main').toggle();
});
jQuery('#earn-reward-close').click(function(){
jQuery('#earn-reward-overlay').toggle();
});
</script>
<?php
Mage::getSingleton('core/session')->setWall('1');
}
Mage::getSingleton('core/session')->unsWall();
?>
Set session variable as "display:block" once it shows up and is closed change it to "display:none" and set it at style="here is the session variable".
you could make it show for every new session by saving to the sessionStorage like this
jQuery(document).ready(function() {
if(window.sessionStorage.getItem('shown') === true ){
jQuery('#earn-reward-box').show();
}
});
And you can set your item to true when the user clicks on the overlay
jQuery('#earn-reward-close').click(function(){
window.sessionStorage.setItem('shown', true);
jQuery('#earn-reward-box-main').toggle();
});
Seeing from MVC, you need a Model(or State) stored somewhere to tell if the popup has shown already or not. For example you can use localStorage as the place to store this information:
localStorage.setItem('popup-shown', 'true');
And the next time you open this page, since localStorage remains, you can tell if it has been shown already or not:
localStorage.getItem('popup-shown') === 'true'
Then you can control the behaviors of you popup as you need.
sessionStorage might be also fine, but take care of this quote:
sessionStorage is similar to Window.localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends.
https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage
I am developing an extension for Magento and am trying to display a popup window to the user during checkout if their data is not able to be properly validated. I am trying to avoid making my own theme or modifying the default to trigger the window to pop up.
Is there another method that I can use to trigger this from the controller? Perhaps through getLayout I can inject the javascript to open the popup and then reload the page?
I would do something like this
<div style="display:none;">
<div id="mycontent">
// your content
</div>
</div>
<button type="button" id="linktopopup" href="#mycontent">
<script type="text/javascript">
("#linktopopup").fancybox({
autoDimensions: false,
afterShow: function(){
// append something to form!
}
});
</script>
I have FancyBox on a website that pops up when they visit and has some info inside it. I'd like to add some kind of button that the user can click, and it sets a cookie not to show the message for about a month or so.
I'm quite useless when it comes to things like this, so if anyone could walk me though what to do, that would be awesome.
Here's what I have so far. At the bottom I've added what I think could be an anchor for the proposed cookie ("noShow"), but I'm not sure if it would work like it is. I've loaded all the jQuery scripts before this for FancyBox, and after those it loads jquery.cookie.js too. If it matters, I'm using whatever the latest download for FancyBox 2 is.
<script type="text/javascript">
function openFancy() {
setTimeout( function() {$('#autoStart').trigger('click'); },1000);
}
$(document).ready(function() {
openFancy();
$('#autoStart').fancybox();
});
</script>
<!-- This is the popup itself -->
<a id="autoStart" style="display:none" href="#autoFancybox"></a>
<div style="display: none;">
<div id="autoFancybox" style="width: 800px">
<div>
<!-- My content for the Fancybox is here -->
<br />
<p style="font-size:10px" align="right">
<a id="noShow" href="#noShow">Don't me show this message again</a>
</p>
</div>
</div>
</div>
Thanks,
Liam.
Apart from your function that launches fancybox, make another that set the cookie's value and expiration time when the button is clicked :
function dontShow(){
$.fancybox.close(); // optional
$.cookie('visited', 'yes', { expires: 30 }); // set value='yes' and expiration in 30 days
}
... then validate the cookie and decide whether to launch fancybor or not :
$(document).ready(function() {
var visited = $.cookie('visited'); // create cookie 'visited' with no value
if (visited == 'yes') {
return false;
} else {
openFancy(); // cookie has no value so launch fancybox on page load
}
$('#autoStart').fancybox(); // bind fancybox to selector
}); // ready
... now the html of your button
<a id="noShow" href="javascript:dontShow()">Don't show this message again</a>
See working DEMO
There's a great jQuery plugin for cookie management which you should check out - https://github.com/carhartl/jquery-cookie
When a user hits your site, you can check your cookie to see if they've been there before. If they haven't then display your animation and set the cookie. If they have then don't run the animation.
From a glance at the jquery-cookie docs, you can set a cookie for 7 days like so:
$.cookie('visited', 'yes', { expires: 7 });
So your code might look like:
// Make sure DOM has fully loaded before running code
$(function(){
if( ! $.cookie('visited')){
// Your code here
} else {
$.cookie('visited', 'yes', { expires: 7 });
}
});
When a user adds an item to our shopping cart it opens our store in a new tab. Different websites oddly enough.
I would like to check if the tab is already open and then repopulate it it with the second item instead of opening another tab with the updated cart.
Is there a way to check this with js? I imagine I can track that we opened the tab but I don't see how I can confirm that it wasn't closed in the time between adding items to the cart without doing some ajax requests pinging both pages etc. Which seems like overkill.
So simply how do you check if a browser tab is already open?
Edited with a solution:
First:
var tab = window.open('http://google.com','MyTab');
Then:
if(tab) {
var tab = window.open('http://yahoo.com','MyTab');
}
window.open has the following parameters: var tab = window.open(url, name, specs, replace)
As long as you use the same name the url will be loaded into that window/tab.
If you wanted to keep the descriptor/reference (tab above), that window.open returns, once the user refreshes the page, that reference is lost.
I think your best bet could be session storage / local storage, but it works only in newer browsers.
All you need is to save a reference to the opened tab that you can relate with some id that will make sense to you... Then when you need to reopen it again just use the saved reference from there you can access your parent or opener window from window.opener. Also to know when the child window is closed there is a default browser event "beforeunload" that when called can remove the window from your reference object in your parent so you know that you have to reopen it not just focus it.
I gone through each steps and I came up with some points.
I tested it on IE.
It did not worked as expected if you use URL like (htp://www.google.com) and it worked if you use your domain page.
While it worked well for Firefox and chrome.
Following example does not work:
<script type="text/javascript">
function myfunction1() {
window.open('http://www.google.com', 'f');
}
function myfunction2() {
window.open('http://www.yahoo.com', 'f');
}
</script>
<body>
<form id="form2" runat="server">
<div>
<a href="#" onclick='myfunction1();'>myfunction1</a>
<a href="#" onclick='myfunction2();'>myfunction2</a>
</div>
</form>
</body>
</html>
And Following example works:
<script type="text/javascript">
function myfunction1() {
window.open('WebForm1.aspx', 'f');
}
function myfunction2() {
window.open('WebForm2.aspx', 'f');
}
</script>
<body>
<form id="form1" runat="server">
<div>
<a href="#" onclick='myfunction1();'>myfunction1</a>
<a href="#" onclick='myfunction2();'>myfunction2</a>
</div>
</form>
</body>
</html>