Hi guys I have a website using opencart and I have a notification bar which tells users there is 10% off there first order however there is a close button but once you click close and refresh the page or visit it at a later time then it will show again, what I want is that when the user clicks close then it will not show again for 24 hours.
http://intoyoufashion.co.uk is my site which you can check it out to see what i mean.
Below is the code
<div id="Notify" style=" background-color:#DAA520; z-index:999;font-size:16px; text-align:center; color:#fff; position:fixed;width:100%;height:18px;top:0px;">Use code open10 at checkout for 10% off your first order<button class="close" onclick="document.getElementById('Notify').style.display='none'" >Close</button></div>
Thanks, if you guys can be of help.
please add the following code blocks to your common.js
//First code block ---start
$('#Notify button').click(function(){
$('#Notify').css("display", "none");
localStorage.setItem("offer_exp", new Date().getTime() + (60 * 60 * 24));
});
// ----End of first code block
$(document).ready(function() {
//second code block --start
if (localStorage.hasOwnProperty("offer_exp")) {
if (localStorage.getItem("offer_exp") <= new Date().getTime()) {
$('#Notify').css("display", "block");
}
else{
$('#Notify').css("display", "none");
}
} else {
$('#Notify').css("display", "block");
}
//-----end of second code block
/* Search */
$('.button-search').bind('click', function() {
url = $('base').attr('href') + 'index.php?route=product/search';
var search = $('input[name=\'search\']').attr('value');
if (search) {
url += '&search=' + encodeURIComponent(search);
}
location = url;
});
Related
I am trying to make sure the popover gets closed if i click anywhere on ui. Please have a look at the sample code at https://jsfiddle.net/vk23nmy8/15/ .
On click of Add, it adds rows to table. Each row has its popover. It works for first few clicks but then does not work at all. I am not sure what I am doing wrong here.Below is the code I am using to close tje pop-up.
$('body').on('click', function(e) {
var count = 0;
$("#tbody > tr").each(function() {
$('[data-toggle="popover' + count + '"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
count++;
});
});
Thanks for your help.
I have a code, which gets refreshed from mysql database on a button click.
From the mysql I get links of images on refresh, but I never know, hat links and how many.
I have a "loading" circle which spins until the page is loaded, but it is shown only, until the code is loaded, which is not very long. After that I see small empty squares on my page as placeholders, until the real images show up.
Does anybody have an idea, how to show the spinning circle untill all images are loaded?
I tried some javascript examples found on the net with building arrays of links, but I was not able to integrate them into my code, because the construction of the codes are very different and I obviously am not a pro.
So here is my code (I simplified it for now):
$(document).ready(function() {
function refresh(free){
$("#loadingfree").show();
if (free) datum = datum + free;
var url = "listfree.php?date=" + datum;
$.getJSON(url,function(data) {
var div_data = '';
$.each(data, function(i,data) {
div_data += "<div class='iconsfree'><a href='"+data.title+"-"+data.appID+"' title='"+data.title+"'><img src='"+data.icon+"'></img></a></div>";
});
$("#loadingfree").hide();
$("#app-wrapper-free").html(div_data);
});
}
$(document).on('click', '#prevbuttonfree', function(e){
e.preventDefault();
$("#app-wrapper-free").empty();
refresh(-1);
});
$(document).on('click', '#nextbuttonfree', function(e){
e.preventDefault();
$("#app-wrapper-free").empty();
refresh(+1);
});
// call the method when page is opened:
refresh(0);
});
If you want the spinner to continue showing until the images are loaded, you should use the load eventListener to make that happen.
So let's say you have your code that has the spinner while it makes the request to the server.
//just an example
$('button').click(function(){
//call server
$.ajax();
//show spinner
$('.spinner').show();
});
Now we will tell the spinner to stay showing until the images are done loading.
$('img').on('load',function(){
//Not sure what your spinner is called
$('.spinner').hide();
});
I ended up with this.
It just shows the content a bit later. It's a fake preloader.
<script type="text/javascript">
var datum = 0;
$(document).ready(function() {
function refresh(free){
if (free) datum = datum + free;
var url = "listfree.php?date=" + datum;
$.getJSON(url,function(data) {
var div_data = '';
$.each(data, function(i,data) {
if ($("#date_free").html() == '');
div_data += "<div class='iconsfree'><a href='"+data.title+"-"+data.appID+"' title='"+data.title+"'><img src='"+data.icon+"'></img></a></div>";
});
$("#loadingfree").show();
$(div_data).hide()
.appendTo("#app-wrapper-free")
setTimeout( function() {
$("#app-wrapper-free").children().show()
$("#loadingfree").hide()
}, 3000 );
});
}
$(document).on('click', '#prevbuttonfree', function(e){
e.preventDefault();
$("#app-wrapper-free").empty();
refresh(-1);
});
$(document).on('click', '#nextbuttonfree', function(e){
e.preventDefault();
$("#app-wrapper-free").empty();
refresh(+1);
});
// call the method when page is opened:
refresh(0);
});
</script>
$(document).ready(function(){
$('#container').load('contents/home.html');
$('#nav ul#navigation li a').click(function(){
var page = $(this).attr('href');
$('#container').fadeOut('slow').load('contents/' + page + '.html').fadeIn('slow');
return false;
});
});
This works good when loading pages within a div container.
home.html containing nivoSlider, when the whole page is refreshing it works good but loading home.html again onto #container after loading pages using function
$('#container').load('contents/' + page + '.html') then the nivoSlider isn't not working.
I have to refresh the whole page just to refresh the div. So I need a code to refresh the div every time it load the pages onto the div #container.
Make sure to encapsulate unique knowledge in a single place in your code. If you need to refresh something, make sure to put this in a single place and then call it as required. Your code could look something like this:
$(document).ready(function() {
var container = $('#container');
function loadContent(url, callback) {
return container.load(url, {}, function () {
// Add code here to refresh nivoSlider
// Run a callback if exists
if (callback) {
callback();
}
});
}
loadContent('contents/home.html');
$('#nav ul#navigation li a').click(function (event) {
var page = $(this).attr('href');
container.fadeOut('slow').loadContent('contents/' + page + '.html').fadeIn('slow');
event.preventDefault();
});
});
I am using titanium to make a small app where i can click on a 'gallery' button located in a window and it opens photogallery. On selecting the photo it should move to next window. But what it does is, it closes the photogallery first, after that i can see my first(button) screen and then it opens the next window.
I dont want it to show the previous window. Is there a way to do it??
I am adding windows to tabs . Below is my code .
cameraButton.addEventListener('click',function(e){
chooseImageFromGallery();
});
function chooseImageFromGallery(){
var capturedImg;
//TODO Titanium.Media.showCamera({
Titanium.Media.openPhotoGallery({
success : function(event) {
capturedImg = event.media;
/* Condition to check the selected media */
if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
var window1 = MyWindows.init(capturedImg, docImgModel, previous_win);
MyCommon.addWindowToTabGroup(window1);
win.close();
}
},
cancel : function() {
//While cancellation of the process
activityInd.hide();
win.remove(activityInd);
},
error : function(error) {
/* called when there's an error */
var a = Titanium.UI.createAlertDialog({
titleid : 'camera'
});
if (error.code == Titanium.Media.NO_CAMERA) {
a.setMessage(L('camera_not_available'));
} else {
a.setMessage('Unexpected error: ' + error.message);
}
a.show();
activityInd.hide();
win.remove(activityInd);
}
});
}
The init method just creates a new window and returns it .
The addWindowToTabGroup method adds it to the current tab
addWindowToTabGroup(window){
// tabGroup is a tab at global level declared in app.js
// activeTab returns the current tab
tabGroup.activeTab.open(window, {
animated : true
});
}
Thanks a lot ....
You can do it this way:
1- on button click fire a global event which will open your photo gallery and then close your current window.
2- Now in success call back of photo gallery (when photo is selected) write you code of opening the new window you want to show your user ...
I tried to implement this code (http://stackoverflow.com/questions/10318316/how-to-hide-or-display-a-google-maps-layer/) on my page, to put the weather/clouds on/off my map,
but somehow it interferes with my current code. I tried the two options that were presented in the above link already, but perhaps I did something wrong, or it interferes with the Fusion Tables selections that are already in my map?
Could someone please help me with the right snippet of code?
My page is here http://www.strahlen.org/map/mapplusweather.htm.
The (de)select buttons are already in the bottom right corner.
Thanks in advance,
Frank
ps: although an admin deleted your posting, thanks to Alexander Farber for your previous help!
ps 2: I of course have the weather layer working, see http://www.strahlen.org/map/mapweather.htm, but I cannot toggle it on/off
* final edit *
to prevent link-rot: I used the code here in my "production-version" now -> http://www.strahlen.org/map/
I've taken a look at your site and I believe you just have to make some basic changes to your existing code. First, add two new vars within you initialize() function:
function initialize() {
var tableId = 3167783;
var cloudDisplayIsOn = false;
var weatherDisplayIsOn = false;
Then, in your existing cloud click listener code, make these changes:
google.maps.event.addDomListener(document.getElementById('cloud'),
'click', function() {
if ( cloudDisplayIsOn ) {
cloudLayer.setMap( null );
cloudDisplayIsOn = false;
}
else {
cloudLayer.setMap( map );
cloudDisplayIsOn = true;
}
});
And finally, in your existing weather click listener code, make very similar changes:
google.maps.event.addDomListener(document.getElementById('weather'),
'click', function() {
if ( weatherDisplayIsOn ) {
weatherLayer.setMap( null );
weatherDisplayIsOn = false;
}
else {
weatherLayer.setMap( map );
weatherDisplayIsOn = true;
}
});
Now you may have to do a little minor debugging, but I believe this will add the display on/off code for the cloudLayer and the weatherLayer that you need.
I'm trying to perform a similar function, but with a different slant. The following code is the currently used geeToggleLayer function from the fusion_maps_v3.js file which our map server page references. I am trying to eliminate the checkbox toggle in favor of someone simply clicking the layer label to toggle visibility.
function geeToggleLayer(e, checkBoxId, channel, glmId, layerName) {
try {
var cb = document.getElementById(checkBoxId);
var id = glmId + '-' + channel;
// toggle layer visibility via clicking checkbox
try {
if (cb.checked) {
geeMap.showFusionLayer(id);
} else {
geeMap.hideFusionLayer(id);
}
} catch (err2) {
alert('Failed attempt to enable/disable layer: ' +
layerName + '\n' + id + '\n' + err2);
}
} catch (err) {
alert('Failed attempt to get checkbox for layer: ' +
layerName + '\n' + err);
}
cancelEvent(e);
}