On my site, I am using a jquery script to make my site dynamic ( most part of the site is charged once, and while you navigates, only the main content will change). It uses .load() . Unfortunatly this function tends to negate any javascript/Jquery code that is called by the container which is dynamic. So I have to call them during the load .
Here is the code of script:
$(function () {
if (Modernizr.history) {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("nav").delegate("a", "click", function () {
_link = $(this).attr("href");
history.pushState(null, null, _link);
loadContent(_link);
return false;
});
function loadContent(href) {
$mainContent
.find("#guts")
.fadeOut(200, function () {
$mainContent.hide().load(href + " #guts", function () {
// I call the script here.
$.getScript('tablecloth/tablecloth.js', function () {
tablecloth();
});
$.getScript('js/domtab.js', function () {
domtab.init();
});
// This one is the one which doesn't work.
$.getScript('js/onReady.js', function () {
});
$mainContent.fadeIn(200, function () {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
console.log(href);
$("nav a[href$=" + href + "]").addClass("current");
});
});
}
$(window).bind('popstate', function () {
_link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
loadContent(_link);
});
} // otherwise, history is not supported, so nothing fancy here.
});
And I have a script for one page, that uses .click() function, onReady.js :
$(document).ready( function() {
var maxHeight = document.getElementById("flip1").scrollHeight;
var maxHeight2 = document.getElementById("fli1A").scrollHeight;
var parent = document.getElementById("flip-container");
var DivContainerHeight = $('#text1').scrollHeight;
$("#text_var").html(maxHeight2);
//alert(DivContainerHeight);
//document.getElementById('tooltip6').style.display = 'block';
document.getElementById('global').style.height = DivContainerHeight + 'px';
//$("#flip-tabs").css({ height: maxHeight+'px' });
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
//'height': '1300px'
});
$('#fl1A').on("click", function (e) {
$("#fli1A").show();
var maxHeight2 = document.getElementById("fli1A").scrollHeight;
//alert("New height: " + maxHeight2);
$("#text_var").html(maxHeight2);
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
//'height': '1000px'
});
});
$('#fl1B').on("click", function (e) {
$("#fli1B").show();
var maxHeight2 = document.getElementById("fli1B").scrollHeight;
//alert("New height: " + maxHeight2);
$("#text_var").html(maxHeight2);
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
//'height': '1000px'
});
});
$('#fl2A').on("click", function (e) {
$("#fli2A").show();
var maxHeight2 = document.getElementById("fli2A").scrollHeight;
//alert("New height: " + maxHeight2);
$("#text_var").html(maxHeight2);
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
//'height': '1000px'
});
});
$('#fl2B').on("click", function (e) {
$("#fli2B").show();
var maxHeight2 = document.getElementById("fli2B").scrollHeight;
//alert("New height: " + maxHeight2);
$("#text_var").html(maxHeight2);
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
//'height': '1000px'
});
});
$('#fl3A').on("click", function (e) {
$("#fli3A").show();
var maxHeight2 = document.getElementById("fli3A").scrollHeight;
//alert("New height: " + maxHeight2);
$("#text_var").html(maxHeight2);
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
//'height': '1000px'
});
});
$('#fl3B').on("click", function (e) {
$("#fli3B").show();
var maxHeight2 = document.getElementById("fli3B").scrollHeight;
//alert("New height: " + maxHeight2);
$("#text_var").html(maxHeight2);
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
//'height': '1000px'
});
});
});
The code will work fine when I load directly for the first time, the page where I uses this code ( A.html), but if I load another page and then go to A.html again then it won't work anymore. It is as if the getscript will work the first time I load a page. Although tablcloth() and domtab() work fine for each page.
In the head of each page I have
<script type ="text/javascript" src="js/onReady.js"></script>
But I don't think it has any purpose.
Another question is it possible to make the script onReady load only when I load the page A.html ?
Instead of $(document).ready you could use function pageLoad(){}.
It's automatically called by the ScriptManager on a page, even on a postback.
I think that's your issue here, your changes doesn't get affected on a postback.
Hope this helps you.
Cheers
You can add events for dynamically created content in the doc ready function with jQuery's .on() method http://api.jquery.com/on/ this will prevent you from having to attach listeners on every load function call
I found the solution I remplaced the codes onReady.js by this :
this.tabHeight = function () {
codes......
};
window.onload = tabHeight;
And in the .load() I call it this way :
$.getScript('js/onReady.js', function () {
tabHeight();
});
In fact I just copied the way tablecloth did it.
Related
I have a basic html document which loads an html file depending on the url hash.
I have this code to do the loading and resizing of the main div:
$(function() {
var newHash = "",
$mainContent = $("#mainContent"),
$pageWrap = $("#kofa"),
baseHeight = 0,
$el;
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
newHash = window.location.hash.substring(1);
$pageWrap.height($pageWrap.height());
/*baseHeight = $pageWrap.height() - $mainContent.height();*/
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(20, function() {
$mainContent.hide().load(newHash + ".html",
function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
}, 100, "swing", function() {
$mainContent.fadeIn(100);
});
$("nav a").removeClass("selectedMenu");
$("nav a[href='#"+newHash+"']").addClass("selectedMenu");
});
});
};
return false;
});
$(window).bind('hashchange', function(){
});
$(window).trigger('hashchange');
});
The code works, but it seems that it doesn't wait for every part of the document to load before it changes the height, which results in .. well this: http://thecardinal.uphero.com/ (part of the content is outside of the main div).
It seems that after clicking on a button in the menu or refreshing the page via F5 it does the correct height.
(you can inspect the website given above for additional code)
why not use 100% height ? can thus
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(20, function() {
$mainContent.hide().load(newHash + ".html",
function() {
$pageWrap.animate({
height: '100%'
}, 100, "swing", function() {
$mainContent.fadeIn(100);
});
$("nav a").removeClass("selectedMenu");
$("nav a[href='#"+newHash+"']").addClass("selectedMenu");
});
});
};
return false;
});
and in css
#kofa {
height: 100%;
}
I really need help.
Here's what I'm trying to do: I wanna create 3 div elements which are flying from top to bottom of div (#lang_flying_objects) and when i click "the right one" (by Id), I need to create three more. When I create them I assign them all class "snowflakes".
But I am only able to click on the first group and my onclick function recognize the right id, but when other group is created it won't trigger the onclick function.
PLEASE HELP ME.
Here is the code I'm using:
<script>
function fallingStuff() {
var $snowflakes = $(),
createFallingStuff = function () {
var $snowflake = $('<div class="snowflakes" id="first"></div>');
$snowflake.css({
'left': (Math.random() * ($('#lang_flying_objects').width()/3 - offset)) + 'px',
'top': (-(20 + offset)) + 'px'
});
// add this snowflake to the set of snowflakes
$snowflakes = $snowflakes.add($snowflake);
var $snowflake2 = $('<div class="snowflakes" id="second" ></div>');
$snowflake2.css({
'left': (Math.random() * ($('#lang_flying_objects').width()/3 - offset) + $('#lang_flying_objects').width()/3) + 'px',
'top': (-(20 + offset)) + 'px'
});
// add this snowflake to the set of snowflakes
$snowflakes = $snowflakes.add($snowflake2);
var $snowflake3 = $('<div class="snowflakes" id="third"></div>');
$snowflake3.css({
'left': (Math.random() * ($('#lang_flying_objects').width()/3 - offset) + 2*$('#lang_flying_objects').width()/3) + 'px',
'top': (-(20 + offset)) + 'px'
});
// add this snowflake to the set of snowflakes
$snowflakes = $snowflakes.add($snowflake3);
$('#falling_zone').prepend($snowflakes);
},
runFalling = function() {
$snowflakes.each(function() {
var singleAnimation = function($flake) {
$flake.animate({
top: "500px",
opacity : "0"
}, 10000);
};
singleAnimation($(this));
});
};
createFallingStuff();
runFalling();
}
fallingStuff();
</script>
And here is my onclick function:
<script>
$('.snowflakes').on('click', function() {
var idInputed = $(this).attr('id');
if(idInputed == "first") //for example
{
fallingStuff();
}
});
</script>
Why it won't recognize the onclick function for second group of created divs?
Since the elements are created dynamically, you should use event delegation:
$(document).on('click', '.snowflakes', function() {
var idInputed = $(this).attr('id');
if(idInputed == "first") {
fallingStuff();
}
});
I'm making a quick animated drop down. I have it working great when you mouseover and mouseout on the initial button. I just cant get the HTML div that drops down to "hold" when you're hovered on the dropdown itself. here is a fiddle of what I'm doing: http://jsfiddle.net/kAhNd/
here's what I'm doing in the JS:
$('.navBarClickOrHover').mouseover(function () {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '200px'
});
}).mouseout(function () {
if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {
} else {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '0px'
});
}
});
It works, but the element doesn't stay dropped down when you have your mouse over it. I added in
if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {
}
to try to make it do nothing when you're hovered over '.dropdownCont'.
Having a hard time explaining it. I'm sorry, I hope I make sense. Any help would be awesome! here's my Fiddle: http://jsfiddle.net/kAhNd/
Here is your code transformed http://jsfiddle.net/krasimir/kAhNd/3/
var button = $('.navBarClickOrHover');
var isItOverTheDropdown = false;
var showDropDown = function() {
var targetDropDown = $('#' + button.attr('targetDropDown'));
var targetDropDownHeight = targetDropDown.height();
targetDropDown.animate({
'height': '200px'
});
targetDropDown.off("mouseenter").on("mouseenter", function() {
isItOverTheDropdown = true;
});
targetDropDown.off("mouseleave").on("mouseleave", function() {
isItOverTheDropdown = false;
hideDropDown();
});
}
var hideDropDown = function() {
var targetDropDown = $('#' + button.attr('targetDropDown'));
var targetDropDownHeight = targetDropDown.height();
targetDropDown.animate({
'height': '0px'
});
}
$('.navBarClickOrHover').mouseover(function () {
showDropDown();
}).mouseout(function () {
setTimeout(function() {
!isItOverTheDropdown ? hideDropDown : '';
}, 500);
});
I guess that this is what you want to achieve.
this is the fiddle:
http://jsfiddle.net/Ywq8G/
I wonder if someone is able to tell me: Why menu1 is flickering after clicking a submenu(the green one) the other two work just fine, but debugging is getting me nowhere and I was like: SO has given me so much answers allready(with just reading) may I contribute and ask my specific question.
I hope the solution will make me a better developer and help others avoid the problems I have encountered.
var MENU_HEIGHT = 110;
$(document).ready(function () {
var menuCollection = {}
var i = 1;
$(".menu").children().each(function () {
menuCollection[i] = [];
$(".subMenu" + i).children().each(function () {
menuCollection[i].push(this);
});
i++;
});
function scroll(menu, item, status) {
if (item < menu.length) {
var currentChild = menu[item];
if (status == "scrollOut") {
$(currentChild).stop().animate({
top: MENU_HEIGHT + 80 * item
}, {
queue: false,
duration: 600
}) {
scroll(menu, item + 1, status);
};
} else {
$(currentChild).stop().animate({
top: 0
}, {
queue: false,
duration: 600
}) {
scroll(menu, item + 1, status);
};
}
}
}
var ii = 1;
$(".menu").children().each(function () {
var target = $(this).attr('class');
var menu = menuCollection[ii];
$("." + target + ", .subMenu" + ii + " > a").bind("mouseover", function () {
doScroll(menu, 0, "scrollOut");
});
$("." + target + ", .subMenu" + ii + " > a").bind("mouseout", function () {
doScroll(menu, 0, "scrollIn");
});
ii++;
});
function doScroll(menu, item, status) {
scroll(menu, item, status);
}
$("a").click(function (event) {
var href = $(this).attr('href');
href = href.substring(1);
$(".current").appendTo(".hidden");
$(".current").removeClass("current");
$("." + href).addClass("current");
$("." + href).appendTo(".main");
$('html, body').animate({
scrollTop: $(".main").offset().top
}, 600);
});
});
There is flickering because you are using href parameter of tag with '#' and when you click on it browsers move window to element with id like #-value. And if you have a lot of content to change browsers first jump to this id and next use your $('html, body').animate({...}) function (so again jump to top and animate to down).
You can change 'href' for example to 'myHref' (in html and js) it's should resolve the problem.
(sorry for my english, i hope is understandable)
I've got the following code which I've put together, and I need to change it from the onclick event to onload, so it loads the modal window automatically when the page is loaded. However, for the life of me I can't work out how do it, i've tried many a permutation it just doesn't seem to work!
$(document).ready(function() {
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel');
var popURL = $(this).attr('href');
var query = popURL.split('?');
var dim = query[1].split('&');
var popWidth = dim[0].split('=')[1];
$('#' + popID)
.fadeIn()
.css({ 'width': Number( popWidth ) })
.prepend('<img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" />');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
});
return false;
});
});
This loads it at the moment:
Popup
Any help will be really appreciated, thanks
If you look up the documentation for the plugin you can move the logic for the popup into it's own function (called popOpen() in the example) and call that on load like this:
$('a.poplight[href=#?w=200]').popOpen();
Try:
$('a.poplight[href^=#]').trigger("click");
Or:
$('a.poplight[href^=#]').click();
These should be in your DOM Ready.
If I understood you correctly, you could try this:
$(document).ready(function() {
$this = $('a.poplight[href^=#]');
var popID = $this.attr('rel');
....