so I made a little code with jQuery ( not the best jquery user yet. )
$(function(){
var theDiv = $('.blury-format-image .post-info .title');
var theThumbnail = $('.blury-format-image .thumbnail').innerHeight();
var theThumbnailW = $('.blury-format-image .thumbnail').innerWidth();
theDiv.innerHeight( theThumbnail );
theDiv.innerWidth( theThumbnailW );
});
which just resizes the div as the height and width of the thumbnail, anyway it only works when I refresh the page which is a problem! because if a mobile user tried the landscape mode the dimensions will look really bad!
is there's somehow to trigger it immediately with any resize action? ty.
Make this as separeate Function called ResizeDiv
function ResizeDiv(){
var theDiv = $('.blury-format-image .post-info .title');
var theThumbnail = $('.blury-format-image .thumbnail').innerHeight();
var theThumbnailW = $('.blury-format-image .thumbnail').innerWidth();
theDiv.innerHeight( theThumbnail );
theDiv.innerWidth( theThumbnailW );
};
<script>
$(function(){
ResizeDiv(); //would be called on page Refresh
})
$(window).on('resize',function(){
ResizeDiv(); // this would be called on resize event
})
</script>
because
$(function(){
is like $(document).ready()
Any code directly inside will be called on document gets ready..which only happens on page refresh... hence you now know why it works only on page refresh
ref : https://api.jquery.com/resize/
$(function()
rez();
$(window).resize(function() {
rez();
});
});
function rez(){
var theDiv = $('.blury-format-image .post-info .title');
var theThumbnail = $('.blury-format-image .thumbnail').innerHeight();
var theThumbnailW = $('.blury-format-image .thumbnail').innerWidth();
theDiv.innerHeight( theThumbnail );
theDiv.innerWidth( theThumbnailW );
}
Related
Building a new site and trying to reuse a JavaScript from the current site that change image on hover. I have a hard time to understand JavaScript so I hope someone can help me to see what I'm missing or doing wrong.
The current site (where I copied from) has many more script running and I don't know if some other script is missing. I have tried to change the initializing part of the script to fit the new site. Please have a look at the puzzlepiece on the current page. http://www.collyfiltreringsteknik.se.
I have got the script running to a point where it adds the four "quad" divs but the mouseover and click function does not work.
This is the html code
<div id="companyvalues" class="clearfix">
<div class="valueimage"></div>
</div>
The jQuery part
(function($){
$.fn.extend({
companyvalues: function(kwargs) {
var defaults = {
static_base:''
};
var options = $.extend(defaults, kwargs);
return this.each(function() {
var obj = $(this);
var div = $('div', obj);
var topleft = $('<div class="quad topleft" data-image="i0000" data-href="/grundpelare/tillganglighet/"></div>');
var topright = $('<div class="quad topright" data-image="i0003" data-href="/grundpelare/konkurrenskraft/"></div>');
var bottomleft = $('<div class="quad bottomleft" data-image="i0002" data-href="/grundpelare/miljoforbattring/"></div>');
var bottomright = $('<div class="quad bottomright" data-image="i0001" data-href="/grundpelare/kostnadsreducering/"></div>');
obj.prepend(bottomright);
obj.prepend(bottomleft);
obj.prepend(topright);
obj.prepend(topleft);
var divs = $('div.quad', obj);
$([ '/uploads/pages/varden_0000_yellow.png',
'/uploads/pages/varden_0001_red.png',
'/uploads/pages/varden_0002_green.png',
'/uploads/pages/varden_0003_blue.png'
]).preload({base_url:options.static_base});
divs.mouseover(function(event) {
var item = $(this);
var data_image = item.attr('data-image');
div.addClass(data_image);
event.preventDefault();
event.stopPropagation();
});
divs.mouseout(function(event) {
var item = $(this);
div.removeClass('i0000');
div.removeClass('i0001');
div.removeClass('i0002');
div.removeClass('i0003');
event.preventDefault();
event.stopPropagation();
});
divs.click(function(event) {
var item = $(this);
var href = item.attr('data-href')
document.location.href=href;
event.preventDefault();
event.stopPropagation();
});
});
}
});
})(jQuery);
Initializing the script.
$(document).ready(function() {
$('#companyvalues').companyvalues();
});
I have a function which creates a div via createElement() in JavaScript.
The problem is that the scroll event is not fired on this div. The weird thing is that the click event fires but not the scroll event. This worked well when I created the div via $.html() on jQuery.
Also my two other functions that scroll the div on hovering on .direction_left and . direction_right don't work either. Also these worked well when I created the div via $.html(). What is the problem here? Thanks.
this is the scroll function to load data via ajax.
var scroll = true;
$(document).on('scroll', '#infinited', function() {
alert('scroll');
var div = $(this);
if(div[0].scrollWidth - div.scrollLeft() == div.width()) {
if(scroll == true) {
$.post('ajax/user/get_infinited.php', {'start': div.children().length}, function(data) {
if(data == '')
scroll = false;
div.append(data);
});
}
}
});
this is the function which creates the infinited div.
create_infinited: function() {
if(!document.getElementById("i")) {
var i = document.createElement("div");
i.id = 'i';
i.style.position = 'relative';
var infinited = document.createElement("div");
infinited.id = 'infinited';
var direction_left = document.createElement("div");
direction_left.className = 'direction_left';
var direction_right = document.createElement("div");
direction_right.className = 'direction_right';
i.appendChild(direction_left);
i.appendChild(infinited);
i.appendChild(direction_right);
$('#search_form').after(i);
}
}
It isn't working because the scroll event doesn't bubble up in the DOM (if you check for example the click event, it will work and that proves that the problem is not in your code - or at least not the way you'd expect).
However, in modern browsers you can capture the scroll event on the document level via the addEventListener, like this:
document.addEventListener(
'scroll',
function(event){
var $elm = $(event.target);
if( $elm.is('#infinited')){
// put your code here
}
},
true
);
Or you can move your "data loader logic" to a function (let's call it getInfinited) that can be accessed in create_infinited, and subscribe there:
$('#search_form').after(i);
$('#infinited').on('scroll', getInfinited);
I'm trying to make my own infinite scroll using ajax, php, mysql on my web app. However I can't find a way to load the new content each time the user is a the end of the page.
For now it loads all the data as soon as the user hit the end of the page.
Is there any way to make my script 'wait until the end of the last page loaded'.
$( ".places-wrapper ").scroll(function(){
var windowHeight = $( ".places-wrapper" ).height();
var documentHeight = $( ".places-wrapper")[0].scrollHeight;
var scrollFromTop = $( ".places-wrapper" ).scrollTop();
var margin = 70;
if( scrollFromTop >= documentHeight - windowHeight - margin){
loadNextPage();
}
function loadNextPage(){
var PlaceID = $( "input[name='placeID']:last" ).val();
var lastHitDate = $( "input[name='hitDate']:last" ).val();
$.ajax({
# .append the new stuff
});
}
});
I guess what you need is a flag to tell your script that a page is loading.
You may try this approach:
// add a variable as flag
var isLoading = false;
if( scrollFromTop >= documentHeight - windowHeight - margin){
if ( !isLoading )
{
isLoading = true;
loadNextPage();
}
}
// inside your ajax's success callback:
.success(function(){
isLoading = false;
// add the page contents
})
As you propably guessed you need an external variable that turns the "load further places"-switch on and off.
var scrollActiveTimer = false;
$(".places-wrapper").scroll(function(){
// Don't continue if a previous ajax request is still active
if(scrollActiveTimer == true){
return;
}
// For an improved performance you should try to minimize the jquery DOM searches
var wrapper = $(".places-wrapper");
var windowHeight = wrapper.height();
var documentHeight = wrapper[0].scrollHeight;
var scrollFromTop = wrapper.scrollTop();
var margin = 70;
var scrollEndPosition = documentHeight - windowHeight - margin;
if( scrollFromTop >= scrollEndPosition){
loadNextPage();
}
function loadNextPage(){
// Disable the loading of further pages for the moment
scrollActiveTimer = true;
var PlaceID = $("input[name='placeID']:last").first().val();
var lastHitDate = $( "input[name='hitDate']:last" ).val();
// Activate the loading event again
scrollActiveTimer = false;
$.ajax({
// parameters..
}).success(function(data){
// copy data into html
wrapper.append(data);
// Activate the loading event again
scrollActiveTimer = false;
});
}
});
I made a fiddle with some dummy functions to simulate the ajax request and html generation: http://jsfiddle.net/Macavity/f77xmho7/2/
I am using this javascript to make two child div's the same height in their parent div:
$(function(){
var leftHeight = $('.leftblock').height();
var rightHeight = $('.rightblock').height();
if (leftHeight > rightHeight){ $('.rightblock').css('height', leftHeight); }
else{ $('.leftblock').css('height', rightHeight); }
});
When I resize the window one of the divs is getting a lot longer again but now the javascript doesn't work anymore. I placed the exact same script again in the window resize function and that solves the problem!
$(window).resize(function(){ // same script as above again });
My question; is there a cleaner way so I can just use the script once but refresh or trigger the script again on window resize?
Sure, declare a function and use it in both handlers:
function resizeDivs() {
var leftHeight = $('.leftblock').height();
var rightHeight = $('.rightblock').height();
if (leftHeight > rightHeight){ $('.rightblock').css('height', leftHeight); }
else{ $('.leftblock').css('height', rightHeight); }
}
$(resizeDivs);
$(window).resize(resizeDivs);
You can declare function and call it whenever you want.
Try using function :
function check(){
var leftHeight = $('.leftblock').height();
var rightHeight = $('.rightblock').height();
if (leftHeight > rightHeight){
$('.rightblock').css('height', leftHeight);
} else {
$('.leftblock').css('height', rightHeight);
}
}
$(function(){
check();//calling function on window load
$(window).resize(function(){
check();//calling function on window resize
});
});
Hello I had this problem which for some reason only occurs when I upload it to my website server the problem is I need a group of images to be the same size as another group of divs and I need this function to load on ready and resize but the function will only work when I resize the document/window rather than ready/load, when I need it to do both.
$(document).ready(function(){
$(window).on('resize ready', function(){
var heightval = $('#main-contentp1').height();
$("#fom-desc").height(heightval);
var heightvalb = $('#moodboard-box-ca').height();
$("#vmt-pic-sec").height(heightvalb);
var heightvalc = $('#view-blog-seca').height();
$(".vmt-pic-sec").height(heightvalc);
});
});
Well you are adding the ready event listener inside $(document).ready() which runs only after the document is ready. so the ready won't be fired.
try this:
$(document).ready(function(){
myFunction();
$(window).on('resize', myFunction);
});
function myFunction(){
var heightval = $('#main-contentp1').height();
$("#fom-desc").height(heightval);
var heightvalb = $('#moodboard-box-ca').height();
$("#vmt-pic-sec").height(heightvalb);
var heightvalc = $('#view-blog-seca').height();
$(".vmt-pic-sec").height(heightvalc);
}
document.onready = whatToDoOnResizeOrLoad;
window.onresize = whatToDoOnResizeOrLoad;
function whatToDoOnResizeOrLoad(){
var heightval = $('#main-contentp1').height();
$("#fom-desc").height(heightval);
var heightvalb = $('#moodboard-box-ca').height();
$("#vmt-pic-sec").height(heightvalb);
var heightvalc = $('#view-blog-seca').height();
$(".vmt-pic-sec").height(heightvalc);
});