Solved

jquery trigger for window resize

Posted on 2012-03-29
5
503 Views
Last Modified: 2012-04-03
I am positioning an element on the screen using jquery. I would like it to move when the window is resized.

Right now I have thi code, which works, but I was wondering if anyone knew how to rewrite it using .trigger so that I don't have to write the positioning twice.

var w = $(window).width();
var h = $(window).height(); 

$(".tour").css({"top": 50, "left" : (w - 950)/2}).click(function(){
    
    location.href = "guided-tour.php";
});    

$(window).resize(function(){
    w = $(window).width();
    h = $(window).height();
    $(".tour").css({"top": 50, "left" : (w - 950)/2});
});

Open in new window


Thanks!
0
Comment
Question by:Kyle Hamilton
  • 3
  • 2
5 Comments
 

Expert Comment

by:Aminadav
ID: 37785359
Method 1:
var w = $(window).width();
var h = $(window).height(); 

a=function(){
$(".tour").css({"top": 50, "left" : (w - 950)/2}).click(function(){   
    location.href = "guided-tour.php";
});    
}

$(window).resize(a);
a();

Open in new window



Method 2 (I think it is better):
$(function () {
$(".tour").click(function(){
    location.href = "guided-tour.php";
});    
a=function(){
var w = $(window).width();
var h = $(window).height(); 
.css({"top": 50, "left" : (w - 950)/2})
}

$(window).resize(a);
$(window).trigget('resize');
})

Open in new window

0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 0 total points
ID: 37785411
I figured it out:

for anyone interested...

// define widths and heights globally for re-use...
var w = $(window).width();
var h = $(window).height();
var dh = $(document).height();

// position elements inside the resize, 
// and trigger resize to establish positioning on load.
$(window).resize(function(){

    w = $(window).width();
    h = $(window).height();

    $(".tour").css({"top": 50, "left" : (w - 950)/2});
    $(".navigation").css({"top": 100, "right" : (w - 950)/2});
    
}).trigger("resize");

// other functions...
$(".tour").click(function(){
    location.href = "guided-tour.php";
});

Open in new window

0
 

Expert Comment

by:Aminadav
ID: 37785425
This is the first answer of me here.
I want points for that.
0
 
LVL 25

Author Comment

by:Kyle Hamilton
ID: 37785437
You only get points when you come up with a solution, or something that leads to a solution.

Your script won't work. It's full of errors.
0
 
LVL 25

Author Closing Comment

by:Kyle Hamilton
ID: 37800067
...figured it out..
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question