Develop Reference

Auto hide alert messages at OpenCart

I am trying to auto hide the ajax alert messages in OpenCart version 2.3.0.2 but I can't make it work correctly. I added the code below in my template's header file so I can hide the .alert div after 5 seconds:
setTimeout(function() {
$(".alert").hide("slide", { direction: "right" }, 150);
}, 5000);
It works fine but only for the first alert triggered and I have to reload/refresh the page to make the hide script work again !
What am I doing wrong?

tl;dr You have to iterate on the array returned by $(".alert").
See this CodePen
Also, you should not use setTimeout to trigger the callback after DOM has loaded ; jQuery has $(document).ready() for that.
JavaScript
$(document).ready(function(){
$(".alert").each(function(){
$(this).hide();
})
});

Need to reload the page for my Jquery script to work again

I have two buttons: menu_icon and exit_icon. When I click on the menu_icon, the menu shows (I just do an animation with CSS3). It goes away when I click exit_icon, but it will only work once. I have to reload the page if I want to re-open the menu.
Here is my JS code:
$(function(){
$('#menu_icon').click(function() {
$('nav').addClass('in');
});
$('#exit_icon').click(function() {
$('nav').addClass('out');
});
});

You need to remove the previous classes:
$('#menu_icon').click(function() {
$('nav').removeClass('out').addClass('in');
});
$('#exit_icon').click(function() {
$('nav').removeClass('in').addClass('out');
});

content not showing when clicking nav

I'm trying to figure out why my jquery isn't working correctly. I click on my navbar link and the content space shows for .0923202 of a second and goes back to be hidden. Thank you.
$(document).ready(function() {
$(".content").hide();
$("a").click(function() {
$(".content").show();
});
});
http://jsfiddle.net/NHgpg/

While anchor tags are meant to send users to another page, you're using it to show new content on the page. You will want to return false to override the default behavior of the anchor tag
$(document).ready(function() {
$(".content").hide();
$("a").click(function() {
$(".content").show();
return false;
});
});

jQuery Mobile Reload Page Depending on Div Contents

I am using jQuery Mobile and am having trouble reloading a page if the text within a div equals a certain value. The contents of the div are loaded with AJAX. The contents of the div are being updated via AJAX just fine, but I don't know why the page is not reloading when the contents are equal to "Your item has expired."
$(document).on('pagebeforeshow', '#listitem', function(event){
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('ajax_item_time.php', function(){
if($("#tableHolder").text() == "Your item has expired."){
window.location.assign("mobile_list.php")
}
else {
setTimeout(refreshTable, 5000);
}
});
}
});
Any ideas? Thank you!

This might help you:
Use .changePage() instead of window.location.assign.
$.mobile.changePage("#YOUR_PAGE_ID");
Here is the documentation.

jQuery crashing page?

When im trying to load a page sometimes its crashing and not loading, My browser is saying its jQuery but thats hosted with Google, If I remove this however everything else seems to work fine, Can anybody see any errors in my code or know where I can go to validate this?
$(document).ready(function(){
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$('#viewport').carousel('#simplePrevious', '#simpleNext');
$('.viewer').each(function() {
$(this).carousel('.viewer #simplePrevious', '.viewer #simpleNext');
});
//$('#slider-stage').carousel('#previous', '#next');
$('#tab-container').easytabs();
// Dropdown, show more text
$('.useful-links ul li a').on('click', function () {
$(this).next('p').toggle();
return false;
});
});
If i comment this out
//$('.viewer').each(function() {
// $(this).carousel('.viewer #simplePrevious', '.viewer #simpleNext');
//});
Everything works fine, Some pages dont actually have a carousel viewer on there, could this be the problem, should i check to see if the element exists first?