I am doing a partial page refresh on a div on my site. In that div I have some js functions I am calling to hide certain parts of the text. This is basically so you can click on an item and cause the hidden text to slide out using jquery.
When I do the refresh, the hide() functions need to be called again which I am now doing with a callback function and I am using display:none for the css. When one clicks on an expand button I change the class to open. The problem is that the items aren't staying open when the div refreshes.
This is the page refresh:
setInterval(function() {
$("#newsWrapper").load(location.href+" #newsWrapper");
}, 5000);
This is the click event that changes the class.
$('.expand').live('click', function (event) {
$(this).parent().next().toggle('slide');
imgName = $(this).html();
//change plus to minus or vice-versa
if (imgName == '<img src="images/plus.png">') {
$(this).html('<img src="images/minus_sign.jpg">');
$(this).parent().parent().children('.news_detail').addClass('open');
$(this).parent().parent().children('.news_detail').removeClass('close');
} else {
$(this).html('<img src="images/plus.png">');
$(this).parent().parent().children('.news_detail').addClass('close');
$(this).parent().parent().children('.news_detail').removeClass('open');
}
event.preventDefault();
});
Related
Ok, I'm building an onepage website with javascript and tailwind css.
All pages are in "display none" except the current page, and onclick on a "next" button, the current page becomes "hidden" and the next page loses the "hidden" class.
Up to now everything worked fine, but I decided to display a "back" button, which puts the current page in "hidden", and removes it from the previous page.
The problem is the following: the animations hiding the two pages start in a loop, one after the other.
$cancelOptions.click(function () {
$options.addClass("animate__animated animate__zoomOut");
$options.on("animationend",function () {
$options.addClass("hidden");
$offers.removeClass("hidden").addClass("animate__animated animate__zoomIn");
})
})
$selectVitrine.click(function () {
$offers.addClass("animate__animated animate__zoomOut");
$offers.on("animationend", function () {
$offers.addClass("hidden");
$options.removeClass("hidden").addClass("animate__animated animate__zoomIn");
})
})
Here, $cancelOptions and $selectVitrines are my buttons, and $offers and $options are my two sections.
Basically, when you click on #cancelOptions, the options section disappears, and the offers section appears and then disappears.... in a loop.
EDIT : when I click on the "selectvitrine" button, no loop is launched
I am using jQuery CustomBox modal. I have it all working fine but I want the div behind it (BUT NOT THE BACKGROUND IMAGE) to disappear when modal is clicked. I have managed that, but not too sure on the code to make it reappear again after the modal is closed. At the moment I have to refresh the page in order for it to come back.
Here is the code I am using so far: http://codepen.io/doolz77/pen/esoHB/
I have not included the modal due to the amount of extra code, however, here is a link to the actual page
to make the modal appear just click on the 'joey' link.
Thanks!
EDIT: At the moment it is controlled by jQuery. The call which is placed in the footer is:
<script>
$(function () {
$('#fadein').on('click', function () {
$.fn.custombox( this {
effect: 'fadein'
});
return false;
});
});
</script>
This fades the modal in and out. Would I just need to place some code here for the #wholePageContainer div to re-appear??
You need to store the html before deleting it to retrieve later. Or you can use show/hide To reduce the pain and achieve desired functionality:
function clearBox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "none";
}
function showbox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "block";
}
Demo
Is this what you were looking for:
http://codepen.io/anon/pen/giFEL
Edited:
Explanation to the above link:
In the above link i have made the html and body tag as 100% and the div element who's content is been removed to some percentage i.e 50%, This will keep the div occupy space event if it is empty.
Next i am storing the html content to a hidden div element and restoring it back to the div when required.
I'm making a book-website with a jQuery-plugin. Every time a link is clicked, the book-page switches to the next page and the .active class switches from link. The problem is that if you click fast between the pages, the active class switches but the movement of the book is too slow so you don't hop to the next page.
I'm trying disable the link after u clicked on one. My idea was just removing an attribute for a couple of seconds like this:
$('.button').click(function(e){
.. switch page using id
.. switch .active
$(".button li a").removeAttr("id");
}
So when the page is loaded, and the active class is switched. U cannot click on another link until the attribute is put back on.
How can remove an attribute for a couple of seconds? Or are there other options to disable a link for a period of time without removing the attribute?
An easy (but a bit hacky) way to accomplish this is returning early out of the handler if the action is already in progress:
var pageIsTurning = false;
$('.button').click(function(e){
if (pageIsTurning) { return; }
// do your stuff and change the page
}):
According to the docs of the booklet plugin you can bind to the bookletstart and bookletchange events which are where you'd update the pageIsTurning variable.
$(".selector").bind("bookletstart", function(event, data) {
pageIsTurning = true;
});
$(".selector").bind("bookletchange", function(event, data) {
pageIsTurning = false;
});
Note that this approach wouldn't work if you have more than one booklet on the page but could easily be adapted.
The first images of my slider are loading after page load. I want the page viewed with the first slides displayed. I have written a function that creates a div overlay that hides the page initially. I need a function (can be in Jquery) that will hide the div overlay when triggered by an event that will result in the hiding of the div overlay when the first images of my slider are displayed. Site in question: applaudvideo.com password: goonies
Javascript (this is in the header.php of my WP site. It creates the div that hides the page.)
if (document.getElementById) {
document.write('<style type="text/css" media="screen">#overlay
{display:block;height:100%;width:100%;background:#2E0854;position:fixed;z-index:99999}
</style>');
}
CSS: (in body)
<div id=overlay></div>
The above function works. I just need a function that will hide the div overlay by binding or listening to an event. The function would be triggered, hide the overlay div, and the slider's images would already be rendered/displayed.
The following are functions I think I can bind or listen or attach to to hide the div overlay:
Copy and Paste the Below listed API Functions into your Functions for Event Listening.
revapi10.bind("revolution.slide.onloaded",function (e) {
//alert("slider loaded");
});
revapi10.bind("revolution.slide.onbeforeswap",function (e) {
//alert("before swap");
});
revapi10.bind("revolution.slide.onchange",function (e,data) {
//alert("slide changed to: "+data.slideIndex);
I have a div that I want to appear based on user input (works), however this div will appear and then hide itself on page load, because the javascript simply tells this Div to appear based on user input , and the input is defaulted to the option which causes the div to hide. I am including the code
<script type="text/javascript">
function HideUnhide() {
if (!$("#RadioButtonInput").attr("checked")) {
$("#hideableDiv").fadeOut(200);
} else {
$("#hideableDiv").fadeIn(200);
}
}
$(function () {
//initial hide/unhide
HideUnhide();
//click triggered hide/unhide
$(".RadioButtonID > input").click(
function (event) {
alert('click');
HideUnhide();
}
);
});
The RadioButton is binded to a SQL value in the website which stores session data, so it can't just "always be hidden" when the page loads, but it's visually annoying to watch this div be present and then disappear based on the data binding.
How can I fix this?
In the server side code that writes out the HTML for the div, test the SQL value and if it should be hidden, then add a style attribute of style="display:none" to the HTML.
You will have to set the initial visibility on the server side. Set the div to runat="server", and right after you set the Checked property of the button, do this:
myDiv.Style.Add("display", (myButton.Checked ? "block" : "none"));