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');
....
Related
Firstly I would like to state that I am useless at jQuery,
so the problem I am facing is that I have no idea how to code the click
at the moment to close the popup you need to click on the button, but I would like for the popup to close when you click outside of it you can see the popup here http://doctorsafraid.tumblr.com/ (click the triangle then the links).
Thisis the script:
<script>
$(document).ready(function() {
//
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<img src="http://i60.tinypic.com/r720j6.png" class="btn_close" alt="close" />');
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend;
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 90) / 2;
var popMargLeft = ($('#' + popID).width() + 90) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .thepopup').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
What should I alter?
Maybe this will work for you. I use something similar but without jQuery ;)
function closePopup(e) {
// Close the popup here
// Remove the listener to prevent problems
$('html, body').unbind('click', closePopup);
}
$('a.poplight[href^=#]').click(function () {
// Your code here
// Add click evenetlistener on hole page
$('html, body').click(closePopup);
});
// Prevent the listener for the hole page
$("#popupContainer").click(function (e) {
e.stopPropagation();
});
Here is my edited version. It includes your code.
<script>
$(document).ready(function () {
//
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function () {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query = popURL.split('?');
var dim = query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend('<img src="http://i60.tinypic.com/r720j6.png" class="btn_close" alt="close" />');
$('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend;
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 90) / 2;
var popMargLeft = ($('#' + popID).width() + 90) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top': -popMargTop,
'margin-left': -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
// add click listener to hole page
$('html, body').click(closePopup);
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', closePopup);
// Prevent the listener for the hole page
$("#popupContainer").click(function (e) {
e.stopPropagation();
});
function closePopup(e) {
$('#fade , .thepopup').fadeOut(function () {
$('#fade, a.close').remove(); //fade them both out
});
$('html, body').unbind('click', closePopup);
return false;
}
});
</script>
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 have a question about my javascript code.
I got this script from internet, but the problem is that it displays text, I want to make a div of it because I want it like a button instead.
This is the code:
<script type="text/javascript">
$(document).ready(function () {
var maxheight=218;
var showText = "Lees meer..";
var hideText = "Inklappen";
$('.leesmeer').each(function () {
var text = $(this);
if (text.height() > maxheight){
text.css({ 'overflow': 'hidden','height': maxheight + 'px' });
var link = $('' + showText + '');
var linkDiv = $('<div></div>');
linkDiv.append(link);
$(this).after(linkDiv);
link.click(function (event) {
event.preventDefault();
if (text.height() > maxheight) {
$(this).hktml(showText);
text.css('height', maxheight + 'px');
} else {
$(this).html(hideText);
text.css('height', 'auto');
}
});
}
});
Thanks for the advice!
For fun i tried changing the code into a jquery plugin, which you could find here, and which simplifies the ready function quite a lot :)
http://jsfiddle.net/Icepickle/SA744/
$(document).ready(function () {
$('.leesmeer').readMore({});
});
Just use input tag with type="button" and value="something " it works
var link = $('<input type="button" value=' + showText + '/>');
Simply add the div tag to the text :
var showText = "<div class='more-less'>Read More..</div>";
var hideText = "<div class='more-less'>Read Less</div>";
JSFiddle
I like to know where an object is on a page,
I did that function
$(window).scroll(function () {
var elemento = $("#containerY");
var positionY = elemento.position();
$( ".valorY" ).text("top: " + positionY.top )
})
It works when page is loaded but $( ".valorY" ) don't refresh de number and always show the same when page is scrolled,
What is wrong?
You should use ($ window).scrollTop() to get the y-coordinate of the top border of your browser and ($ 'yourElement').scrollTop() to get its scroll-position. You can compare these to see what is on screen and what is not.
Sounds like you just need to subtract the window's scroll position from your elements position:
$(window).scroll(function () {
var elemento = $("#containerY");
var positionY = elemento.position();
$( ".valorY" ).text("top: " + (positionY.top - $(window).scrollTop()) )
})
thanks,
here is the solution!
positionY.top - topBrowsere
and the code:
$(document).ready(function(){
$(window).scroll(function(){
var elemento = $("#containerY");
var positionY = elemento.position();
var topBrowser = $(window).scrollTop();
$( ".valorY" ).text("top: " + (positionY.top - topBrowser) );
})
})
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.