I am facing a strange thing. I am using lightslider to display my img-s. Now when I use it inside the regular dom, so the one that is open everything works fine. But sometimes I show a modal window on top of my regular one, and there I have the problem that the first img is never shown. I can scroll to the others, but when I comes to select the show the first one, it appears for a second and then dissapears. After some trying a found out that when I resize the browser window (by hand) for just one pixel then I am able to select the first img (if it was already selected but not visible it appears on its own)
Does anybody know what the reason could be, or if not, how can I simulate the behaviour of the window resize (that would be the quick and dirty solution) ?
Regards
you can put this $( window ).resize(); after the script. That should work. However you can use the following code snippet too:
onSliderLoad: function() {
$( window ).resize();
}, onAfterSlide: function() {
$( window ).resize();
}
don't use too many this script $( window ).resize(); ,because jquery will display error "exceeded RangeError: Maximum call stack size exceeded" , if it shows that error, just use one $( window ).resize();
Anyone still having this issue with a carousel.. A quick fix is by toggling between ID's, one of which has "height:0px" and overflow hidden. This one really really killed me so hope it helps someone out there.
#demo {
visibility: hidden;
overflow: hidden;
height: 0px;
}
#demo_visible {
overflow: hidden;
}
jQuery(document).ready(function ($) {
$(".arrow_link").click(function (e) {
e.preventDefault();
if ($(".demo").attr('id') == 'demo_visible') {
$(".demo").attr('id', 'demo');
} else {
$(".demo").attr('id', 'demo_visible');
}
});
});
you can put $(window).resize(); after the lightSlider() script.
You can use the following code snippet too:
setTimeout(() => {$( window ).resize()}, 500);
Here you can use setTimeout Function, because some time script executed before load the DOM.
Related
I need my scroll to tell me my scrollTop
So i have code kind of this:
$(document).ready(function(){
console.log('Hi!');
$(window).scroll(function(){
console.log('Scrolling...');
var wScroll = ($(window).scrollTop());
console.log(wScroll);
});
});
but cosnole is silent. She tell me Hi!, but she don't say Scrolling... anyway. I tried a lot. So now i am asking!
Try the below code,
See jQuery.scroll(). Make sure that scrollbar is visible otherwise the scroll event will not fire.
Also try changing your window listener to the div if you want to listen to a specific div scrolling.
$(window).scroll(function() {
console.log('Scrolling...');
var wScroll = ($(window).scrollTop());
console.log(wScroll);
});
body {
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The script appears correct. However, I have this feeling that either you're not editing the correct file (it can happen), or you need to clear your cache as the browser is probably using a cached version of the file. Both Firefox and Chrome have an option to disable the cache when the dev tools are open. That way, you don't need to clear every time.
I am generating script that is supposed to select values after page got reloaded with F5 or browser back button.
JQuery is loaded, and element is on the page, screenshot below shows me running in console $('.isEstateOver325K').show() and element remaining display:none.
I must be missing something obvious here.
script that is supposed to change visibility is fired by another that triggers change and click on element it would be weird if this would be the reason since it works ok for some different elements - still worth mentioning.
(function() {
$(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).closest('.quote-form__question').click(function() {
if ($(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).is(':checked')) {
$(".isEstateOver325K").show();
$(".isEstateOver325K").addClass('quote-form--active');
} else {
$(".isEstateOver325K").hide();
}
});
});
$(function() {
$("[name='MaritalStatus'][value='Single']").trigger("click");
$("[name='MaritalStatus'][value='Single']").trigger("change");
});
I am sure someone has experienced something similar, why doesn't it change to display:block?
Try with :
$('').attr('style','display:block;')
Try to use toggle(). Toggle will toggle display:none to display:block and Vice-Versa.
$(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).closest('.quote-form__question').click(function() {
if ($(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).is(':checked')) {
$(".isEstateOver325K").toggle();
$(".isEstateOver325K").addClass('quote-form--active');
} else {
$(".isEstateOver325K").toggle();
}
});
});
$(function() {
$("[name='MaritalStatus'][value='Single']").trigger("click");
$("[name='MaritalStatus'][value='Single']").trigger("change");
});
even this can also work
/*---for multiple css property-----*/
$('').css({
'display':'block'
});
/*---for single css property-----*/
$('').css('display','block');
So for your first question, to sum up . If you call
$('').show();
You're telling jQuery to select "nothing" and to show this "nothing".
If you want to select "all". Than you have to use the all-selector(http://api.jquery.com/all-selector/):
$('*').show();
A really basic example is here: http://jsbin.com/cixoxatufu/2/edit?html,js,console,output
And for the rest, I really appreciate a JSBin or something as this is just hinting to something and not really providing a solution.
I have a chat-based system I'm building in an MVC framework using jQuery/AJAX. When the page loads, it fills the chat window with the last x responses from the database.
I've looked everywhere for an answer, and can't find anything on this. Every alternative I've tried doesn't resolve it.
I use this function to scroll down to the bottom of my chat window;
function scrollToBottom()
{
var panel = $('.panel-body#main-window');
panel.scrollTop(panel.height());
}
This is my CSS:
.panel-body#main-window
{
overflow-y: scroll;
height: 550px;
width: 100%
}
This works fine when I bind it to an onClick handler function, but no matter what I've tried, it won't scroll to the bottom of my panel before the end of my $(document).ready(); call. So when the page is loaded, it doesn't scroll to the bottom of my container.
Tried this both in Firefox and Chrome and neither work. My function is being called, but when it's called inside $(document).ready();, it refuses to scroll to the bottom of my panel.
I also tried this function, which doesn't work either;
$(window).on('load', function(){
setTimeout(scrollToBottom(), 500);
});
you are not passing a reference of the function to your setTimeout, should be as follows I believe:
$(window).on('load', function(){
setTimeout(scrollToBottom, 500);
});
The way you are doing it, the function scrollToBottom will be executed as soon as that code gets evaluated.
i searched on internet for j Query or java script code that do some work for me like when the the page completely loads a popup window come out from the right side for some time and then disappears after some specific time but i couldn't succeed. i need yours help and favor in this regard.(send me any link of document related my question or any you tube or any other media link from where i could get help now and for future).
thanks in advance
you can use jquery' anitmate function Animate()
some thing like this: pseudocode
$('#yourDivorModalBox').animate({
right: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
Have you checked jQuery's ready() function? There's also window.open
$(document).ready(function() {
newwindow = window.open('http://www.google.com/','testme','height=200,width=300');
});
Then use setTimeout() to close the popup.
I'm working on my website and I decided it would be to my advantage to use 'designed' scroll bars instead of the ones browsers come with. I was lucky enough to come across this script http://www.hesido.com/web.php?page=customscrollbar which basically does exactly what I need.
The only problem I've got is that I am trying to apply the custom scrollbars to some divs which are initially hidden and then toggle via a link div between hide/show.
As the programming page (http://www.hesido.com/flexcroll/flexcroll-programming.htm) explains, sometimes the scrollbar needs to be updated and/or manually applied, because being in hidden divs they do not load when the page opens.
I've checked my CSS and my HTML and the code works fine if the div is not hidden, so I am 100% that this has to do with the way I am hiding my divs.
The basic format for that is
$(document).ready(function() {
$('#iddiv').hide();});
$(document).ready(function() {
$('#id').click(function() {
$('#iddiv').animate({
height: 'toggle'
}, 2000
);
});});
So I hide it initially, and then toggle it via a button.
Now, in this logic - the manual application of fleXenv.fleXcrollMain("your-div-id"); should be somewhere above the last line of script (the one containing }); ).
This, however, either makes the div unscrollable or messes up the rest of my Javascript (scrollTo functions stop working, etc...)
My question is, as a bit of a noobie JS user - WHERE do I need to place that piece of code that manually activates the custom scrollbar in my code AFTER the toggle is activate and WHAT is the structure?
By which I mean, does fleXenv.fleXcrollMain("your-div-id"); stand on its own, does it need its own separate function, does it get a $ before it?
Loads of thanks to anyone who can help me with this! Final bit stopping me from launching my website.
UPDATE!
HERE is the CSS/HTML and code for an example of what I am trying to achieve; because one of the files in the script needs to be downloaded to work, I think the only way is to copy and paste all the bits in a new HTML document.
The jQuery .animate() function accepts more arguments. One of them is a function that gets called when the animation completes.
function activateScrollbar () {
fleXenv.fleXcrollMain('iddiv');
}
$('#iddiv').animate({
height: 'toggle'
},
2000,
activateScrollbar
);
You can also use an anonymous function, like this:
$('#iddiv').animate({
height: 'toggle'
},
2000,
function () {
fleXenv.fleXcrollMain('iddiv');
}
);
Most functions in jQuery that include an animation, (like .hide() or .fadeOut()), allow you to pass a function that gets called when the animation completes. Most of these jQuery functions allow you to pass these extra arguments in a configuration object which can be more readable:
$('#iddiv').animate({
height: 'toggle'
},
{
duration: 2000,
complete: function () {
fleXenv.fleXcrollMain('iddiv');
}
}
);
See the .animate() documentation for more details.
Here's a full example with the click behavior included:
$('#myButton').click(function () {
$('#iddiv').animate({
height: 'toggle'
},
{
duration: 2000,
complete: function () {
fleXenv.fleXcrollMain('iddiv');
}
}
);
});
Try this:
$(document).ready(function() {
$('#id').click(function() {
$('#iddiv').animate({
height: 'toggle'
}, 2000,
function(){
fleXenv.fleXcrollMain( $(this).attr('id') );
}
);
});
That function is callback executed after animate function is complete.