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);
});
Related
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 );
}
This is my code:
$(document).ready(function () {
var na = $("#navDivA");
var nb = $("#navDivB");
var ca = $("#contentA");
var cb = $("#contentB");
var la = $("#home");
var lb = $("#about");
var firstSession = true;
na.on("click", function () {
ca.load("home.html", function(){
alert("Loaded");
});
});
nb.on("click", function () {
cb.load("about.html");
});
});
<div id="wrapper">
<div id="navDivA"><a id="home">Home</a></div>
<div id="navDivB"><a id="about">About</a></div>
<div id="contentA"></div>
<div id="contentB"></div>
</div>
Why does it alert multiple times every time I start to click? How can I avoid this? I want to load the html file once.
You can use function one instead of on. According to documentation
The handler is executed at most once per element per event type.
which seems to be what you need. Change the code to
na.one("click", function () {
ca.load("home.html", function(){
alert("Loaded");
});
});
nb.one("click", function () {
cb.load("about.html");
});
I've created some JavaScript using Jquery, for the page animation :
I trying to optimize it since i repeat the same thing for subtab1, subtab2, subtab3.
The same function is executed for all of them, and the only thing is changes is variable i iterating on?
Any suggestion?
<script type="text/javascript">
$(document).ready(function () {
var $defensivo = $('#defensivoimg');
var $equilibrado = $('#equilibradoimg');
var $activo = $('#activoimg');
var $defensivoSubTab = $('#subtab1');
var $equilibradoSubTab = $('#subtab2');
var $activoSubTab = $('#subtab3');
var $fundosdiponiveis = $('#fundosdiponiveis');
var $fundosdiponiveisTab = $('#tabs1');
$defensivo.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$defensivoSubTab.removeClass("hide");
$defensivoSubTab.show();
});
$equilibrado.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$equilibradoSubTab.removeClass("hide");
$equilibradoSubTab.show();
});
$activo.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$activoSubTab.removeClass("hide");
$activoSubTab.show();
});
});
</script>
For a while:
var $fundosdiponiveis = $('#fundosdiponiveis');
This is my default div.
var $defensivoSubTab = $('#subtab1');
var $equilibradoSubTab = $('#subtab2');
var $activoSubTab = $('#subtab3');
That divs apears when i clicking on one of the following tabs:
var $defensivo = $('#defensivoimg');
var $equilibrado = $('#equilibradoimg');
var $activo = $('#activoimg');
And that button hides and changes style"display" to none, on click, of my three #subtab's
var $fundosdiponiveisTab = $('#tabs1');
Any suggestion?
You could write a function that returns the proper function:
function createShowTabFunc(tab) {
return function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
tab.removeClass("hide");
tab.show();
}
}
Then assign your click handlers:
$defensivo.live('click', createShowTabFunc($defensivoSubTab));
$equilibrado.live('click', createShowTabFunc($equilibradoSubTab));
$activo.live('click', createShowTabFunc($activoSubTab));
Have a common class attribute to all the tab's and you just need to write $('.class').click() and in this get the id of the corresponding tab and according to the id fetched by attr function, you can have an if else to define your variables inside the if else and execute your code block.
I'm new to js. Please, don't kick painfully.
I have this code
window.onresize=function() {alert(1);};
When I resize any browser`s window, this function fires twice. Why? And how to rewrite this code that code will fire once.
Thanx in advance.
You need a timeout to bundle the resize events.
var res;
window.onresize=function() {
if (res){clearTimeout(res)};
res = setTimeout(function(){console.log("resize triggered");},100);
};
live Example
This event will fire multiple times in different browsers (some once you've finished the the resize, others during).
One way to get around this is to wait a certain amount of time (say half a second) after the event fires, to see if there are further updates. If not, you can proceed with the alert.
e.g.
var resizeTimer;
window.onresize = function(){
if (resizeTimer){
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function(){
alert(1);
}, 500);
};
See it work on this fiddle.
To prevent function from "firing" the same result more than once when user resize
var doc = document; //To access the dom only once
var cWidth = doc.body.clientWidth;
var newWidth = cWidth; //If you want a log to show at startup, change to: newWidth = 0
window.onresize = function (){
newWidth = doc.body.clientWidth;
if(cWidth != newWidth){
cWidth = newWidth;
console.log("clientWidth:", cWidth); //instead of alert(cWidth);
};
};
I propose other solution because I don't like the timeouts,
`var resized;
window.onresize = function () {
if(resized){
resized = false;
}
else{
resized = true;
alert('resize');
}
};`
How to call javascript onmouseout event in javascript code?
I.e.:
var div=document.getElementById('new');
if(div.mouseout)
document.getElementById('new').style.visibility='hidden';
Thanks.
I think you want:
var div = document.getElementById("new");
div.onmouseout = function (e)
{
this.style.visibility = "hidden";
}
var div = document.getElementById("new");
div.mouseout = function()
{
this.style.display='none';
}
window.onload = function(){
var div=document.getElementById('new');
div.onmouseout = function(){
this.style.visibility='hidden';
};
};
You can use this keyword to specify the current element, no need to again fetch the element using document.getElementById.
Working Demo