I am using the following onclick function that triggers the object to become full screen when clicked. I want the object to be fullscreen when the page loads without having to click.
fbNav.find('ul li.fullscreen').on('click', function(e){
if(!fullscreen) {
fbFullscreen.show();
fbFullscreen.append(fbCont);
$window.trigger('resize');
} else {
fbParent.append(fbCont);
fbFullscreen.hide();
$window.trigger('resize');
}
fullscreen = !fullscreen;
});
How can i achieve this?
You better put the main logic in a function and call the same function on ready and click.
function fullscreen(){
if(!fullscreen) {
fbFullscreen.show();
fbFullscreen.append(fbCont);
$window.trigger('resize');
} else {
fbParent.append(fbCont);
fbFullscreen.hide();
$window.trigger('resize');
}
fullscreen = !fullscreen;
}
//will be executed when page loads
$(document).ready(function(){
fullscreen();
});
//will be executed on click
fbNav.find('ul li.fullscreen').on('click', function(e){
fullscreen();
});
You can trigger click event on page load.
fbNav.find('ul li.fullscreen').trigger("click");
Related
I have a button that opens up the relevant accordion tab (TAB 2), when I first click the button it opens tab2, if I go back and click it a second time it works (goes to TAB2) BUT if i click it a third time nothing happens:
My button:
<a onclick="changeTab2();">
My function:
<script>
var tabHeight = $('.tab.active').height();
function animateTabHeight() {
tabHeight = $('.tab.active').height();
$('.tabs-content').stop().css({
height: '100' + '%'
});
}
function changeTab2() {
var getTabId = $('.tabs-header .active a').attr('tab-id');
$('.tab').stop().fadeOut(300, function () {
$(this).removeClass('active');
}).hide();
$('.tab[tab-id=' + 2 + ']').stop().fadeIn(300, function () {
$(this).addClass('active');
animateTabHeight();
});
}
</script>
No idea to why it stops working.
Click event is binding only in the page load. That is why it is working in the first place. Try to dynamically bind click function each time the tab is opened.
Set id to a and bind click event.
<a class="t1" id="subDiv1"></a>
$('#subDiv1').unbind("click");
$('#subDiv1').bind("click",function(){
// place your code here
});
Now call this inside the #tab-1 click function.
I have one button. His first action is to stop a video. Then it's icon change and data-status too. His second action is to reload the page.
The problem is that I can't do the second even if I code some conditions. Sometimes it don't do anything, sometimes the second action comes at the same time of the first one.
Here is my Jquery code:
// STOP VIDEO (ACTION 1)
$("#button").click(function(){
$('#button').attr({
src: 'img/film.png',
'data-status':'stop'
});
});
// RELOAD (ACTION 2)
$("#button[data-status='stop']").click(function() {
location.reload();
});
// OTHER METHOD FOR RELOAD (ACTION 2)
if ($("#button").data( "status", "stop" )) {
$("#button").click(function() {
location.reload();
});
}
Here is my HTML code:
<img id="button" src="skip.png" data-status="play">
Can you help me?
By binding the click event multiple times, you're firing both the functions on the second click. Instead, you should put the logic that decides to stop/reload inside the one event callback:
$("#button").click(function(){
var button = $(this);
if(button.attr('data-status') === 'stop') {
// Already stopped
location.reload();
} else {
// Stop
button.attr({
src: 'img/film.png',
'data-status':'stop'
)};
}
)};
I have 6 images that load in different 6 different modal windows and they each have a next button and also a close button in them. The next button works with the following jquery code:
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide');
$('#featuresModal1').on('hidden.bs.modal', function () {
$('#featuresModal2').modal('show');
document.getElementById('#featuresModal1').style.display="none";
});
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
$('#featuresModal2').on('hidden.bs.modal', function () {
$('#featuresModal3').modal('show');
document.getElementById('#featuresModal2').style.display="none";
});
});
However, the problem is: Even when I close/hide the first modal ('#nextModal12') by clicking the CLOSE button instead of the next, the second modal appears.
I believe this is because the hidden.bs.modal function is picked up and called again even when I'm not clicking the next button. How do I prevent the script from picking up the hidden.bs.modal function indiscriminately?
Try use .one function instead of .on. When you use .on() your callback would be repeating again and again, beacuse you bind it again for each click;
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide');
$('#featuresModal1').one('hidden.bs.modal', function () {
$('#featuresModal2').modal('show');
});
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
$('#featuresModal2').one('hidden.bs.modal', function () {
$('#featuresModal3').modal('show');
});
});
Don't bind hidden.bs.modal again and again on modal click, just bind it once like,
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide');
});
$('#featuresModal1').on('hidden.bs.modal', function () {
$('#featuresModal2').modal('show');
$(this).hide();// you can use hide function
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
});
$('#featuresModal2').on('hidden.bs.modal', function () {
$('#featuresModal3').modal('show');
$(this).hide();
});
Alternatively, you can try
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide'); // hide first
$('#featuresModal2').modal('show'); // show second
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
$('#featuresModal3').modal('show');
});
I have this code:
$('input.ShowResellerAccounts').on('click', function(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
which hides/shows a table tbody id on click.
how can i make this code run on page load as well as on click?
In the document.ready function you can trigger the click event like
$('input.ShowResellerAccounts').trigger('click');
Separate it into a function and bind in on load as well as on click:
function checkInput(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
$(document).ready(function() {
$('input.ShowResellerAccounts')
.on('click', checkInput) // bind to click
.each(checkInput); // call now
});
u can use $(document).ready :
$(document).ready(function(){
//put your code here
});
Wanted to have a word counter next to a input textbox on the website
Got it working to show the count when the user click or modify the text but I wanted to load up straight away when the page finish loading.
$(document).ready(function() {
$("#product_name").change(displayText).keyup(displayText);
function displayText(){
$("em#counter").text($(this).val().length +' chars');
}
});
So I tried this the code below but couldn't get it working and don't know why.
$(document).ready(function() {
if($("#product_name").length){
displayText();
}
$("#product_name").change(displayText).keyup(displayText);
function displayText(){
$("em#counter").text($(this).val().length +' chars');
}
});
Thanks so much.
Try this
if($("#product_name").length){
displayText();
}
$("#product_name").change(displayText).keyup(displayText);
function displayText(){
$("em#counter").text($("#product_name").val().length +' chars');
}
Demo: Fiddle
Problem was your displayText() call during page load. In displayText you had used $(this) to access the input field, which was working as a event handler. But when you call displayText directly this will point to the window object.
Try .on() with multiple event.
$("#product_name").on({
change: function() {
// Handle change event
},
keyup: function() {
// Handle keyup
}
});
and for "when the page finish loading." use $(window).load(function() { });