|
JavaScript - Jquery: If Window Resize {...} Else {...}
hi,
how can i write this if/ else condition in jquery?? if window resize, run this code, Code: $(window).resize(function(){
var height_window = $(window).height();
var width_window = $(window).width();
var margin_left = (width_window/2) - (840/2);
$('.slide').css({width:width_window+'px'});
$('.content').css({marginLeft:margin_left+'px'});
$('#enter').click(function () {
$('#container').animate({marginLeft:'-'+width_window+'px'}, 600);
return false;
});
$('#back').click(function () {
$('#container').animate({marginLeft:'0px'}, 600);
return false;
});
});
else run this, Code: var height_window = $(window).height();
var width_window = $(window).width();
var margin_left = (width_window/2) - (840/2);
$('.slide').css({width:width_window+'px'});
$('.content').css({marginLeft:margin_left+'px'});
$('#enter').click(function () {
$('#container').animate({marginLeft:'-'+width_window+'px'}, 600);
return false;
});
thanks, Lau Similar TutorialsI'm not sure what this is called to google it, ok so i have 3 divs Code: <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> Now say my page is 800x600 So when the page loads #div1 and #div3 height = 390px and #div2 height = 20px; What i want is when #div2 is draged it resized #div1 and #div3 E.G (#div2 is draged up so top = -100px) so when that happens i want #div1 = 290px and #div3 = 490px And vice versa now this is the code i have for my site So #div1 = ".torrents-list" #div2 = "#dragBar" #div3 = "#torrent_info" PHP Code: $("#dragBar").draggable({ axis: 'y', drag: function(event, ui){ var heightString= $("#dragBar").css("top"); var height = parseInt(heightString.replace("px", "")); $("#dragBar").css("top", "0px"); $(".torrent-list").height($(".torrent-list").height() + heightString); $("#torrent_info").height($("#torrent_info").height() - heightString); } }); But this dose not work for me its never setting #dragBar top to 0px and not resizing any thing if some one can tell me what this is called so i can google for a prebuilt one if not help me write one please? jQuery(window).resize(function(){ window.location.href=window.location.href; }); this code was work all browsers but not work IE6. if anyone knows reply.. Hi, When I use the following code snippet in all major browsers (Chrome, FF, Safari, Opera, IE8), the window opens with a scroll bar and it is resizeable EXCEPT IN IE8. In IE8, there's no vertical scroll bar and it's not resizeable... any idea why not? window.open('http://www.mysite.shtml?' + report_vars, '', "status=no, toolbar=no, location=yes, menubar=no, scrollbars=yes, alwaysRaised=yes, resizable=yes, width=" + window.outerWidth / 1.1 + ", height=" + window.outerHeight-0.1); Thanks for reading! ~ kberry I've got a page (hrnewseastanglia.com) where I have to use a jquery function to stretch the body to the user's window height if it isn't already. In the same code I also use a condition that if the body is bigger than the user's window, the content has a padding to stop it going over the grass. The reason I need to do the resize is because I have a background image that needs to sit at the very bottom of the page (with no bar or gap below it). The reason the padding can only exist when the body is bigger than the window is because it will put a scrollbar on pages that shouldn't have them. It works great, but the only trouble is that if somebody decides to resize their window on a page that fits in it - it breaks. This is my script: Code: <script type="text/javascript">
$(document).ready( function() {
stretch_portal_content();
$(window).resize( stretch_portal_content );
});
function stretch_portal_content() {
// if the body isn't at least as big as the user's window - force it to be
if( $(window).height() > $('body').height() ) {
$( '#wrapper' ).height(
$(window).height() - ( $('body').height() - $('#wrapper').height() )
);
}
// if the content goes beyond the window make sure it doesn't go beyond the grass at the bottom
if( $(window).height() < $('#wrapper').height() ) {
$( '#wrapper' ).css("padding-bottom", '130px');
}
}
</script>
I've been scratching my head over this for hours but haven't come up with a solution. If anyone can help I'd really appreciate it! Hi All Is is possible to 'Refresh' a script when the browser window is resized? I know how to execute a script using the (window).resize event but I effectively need to 'destroy' the initial instance and re-load it. This must be acheived without refreshing the browser If it helps I'm using the SmoothDivScroll plugin which has a known bug whereby widths aren't recalculated when the window is resized. The script stops working untill the browser is restored to it's initial width and unfortunately I don't have the expertise to fix that All help appreciated Cheers Craig Hello, I have this short script he Code: function resizeImages() { //Function will be ran onload in the <body> tag
var img = document.images; //Puts all the images in an array
for (var i = 0; i < img.length; i++) { //A loop to execute a set of functions for every image
var parentElement = img[i].parentNode; //Gets parent element of image
var parentWidth = parentElement.width(); //Gets width of parent element (value is an integer without "px")
var imgWidth = img[i].width(); //Gets image width
var parentHeight = parentElement.height(); //Gets height of parent element
var imgHeight = img[i].height();//Gets image height
if (parentWidth < imgWidth){
img[i].width(parentWidth); //Sets width of image to width of parent element
img[i].style.height = "auto"; //Scales height
}
if (parentHeight > imgHeight){
img[i].height(parentHeight); //Sets height of image to height of parent element
img[i].style.width = "auto"; //Scales width
}
alert(parentWidth); //To test if parentNode is working correctly. Should return an integer.
}
}
It's got some JQuery in it (.width() and .height()) to make manipulation of the dimensions easier to manage. Basically, it's supposed to resize all the images on the webpage to the size of their parent elements (divs) without losing aspect ratio. Image overflow will be hidden so that no matter what the aspect ratio of the image and it's container the largest possible area of the image will be exposed. The alert() function I have at the bottom is supposed to run as a test that each loop is working correctly. However, my images don't get resized and I get no alert. I think the loop may be breaking out before it goes through everything. Anyone have ideas? I'm not a Javascript coder. Thank you, Jared I have found a jQuery slide show at http://tobia.github.com/CrossSlide/ which interests me because of its smooth, cross-browser fade transitions. I would like to add a feature which automatically resizes the images proportionally, to fit the browser window. This feature is demonstrated in the Supersized slide show at www.mauitradewinds.com, but I am not satisfied with the quality of fade transition with Supersized -- especially under Safari. I would appreciate any guidance as to how to implement auto-resizing with the Cross-slide plug-in. Additionally, it would help if Cross-slide launched the slide show without waiting for all images to load.
All, I've got the following bit of code: Code: $(function(){
$(".facebook").fancybox({
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'hideOnOverlayClick' : false,
'hideOnContentClick' : false,
'type' : 'iframe'
});
});
When I click on a link I'm trying to open up an iFrame to have my user have some facebook photos be displayed. If they aren't logged in I redirect them to facebook to login and then facebook redirects them back to my page. The return URL looks something like: http://website.com/get_started.php?page=facebook What I would like to do is open up the same iFrame now with their pictures. So I have the following code to do that: Code: function showFacebook(){
alert("goes to show facebook");
$(".facebook").trigger('click');
}
function parseQS(str){
var ob={}, float="", key="", dc=decodeURIComponent;
for( var i=0, mx=str.length; i<mx;i++){
var it=str[i];
if(it==="="){ key=float; float=""; continue;}
if(!it.search(/^[?&]/)){
if(it==="&" && str.slice(i+1,i+5)==="amp;"){ i=(i+4);float+="&"; continue;}
if(key){ob[key]=dc(float);} key=""; float=""; continue;
}
float+=it;
}
ob[key]=dc(float);
return ob;
}
$(window).load(function(){
var allParams=parseQS(location.href);
if(allParams.page!=undefined){
if(allParams.page=="facebook"){
$(".facebook").fancybox({
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'hideOnOverlayClick' : false,
'hideOnContentClick' : false,
'type' : 'iframe'
});
showFacebook();
}
}
});
I can't get the iFrame to load again. In my window.load function I'm basically trying to reinitialize the fancybox iframe code and then based on the link he http://fancybox.net/blog I'm trying to trigger it again. The alert appears so I know it's getting to the function but it's not opening up the iFrame. Any ideas on how to make this happen? Thanks very much in advance! How can i run a script after the window.open loads completely?
Hi, I have a JQuery modal window and I am trying to pass the value of its input field to a hidden input field within a form but I can not seem to get the value when it is in the modal window. Modal Window Code: Code: <div id="modal-content" class="clearfix"> <h2> enter a name</h2> <div> <input id="enteredName" name="enteredName" type="text" value="" /> <a href="javascript:submitform(true)" name="save" id="save" class="btn"><span>Save</span></a> </div> <a href="javascript:submitform(false)" id="close" class="close-link">No thanks just carry on</a> </div> Javascript to set the value of the hidden field to equal the value of the modal input field Code: <script type="text/javascript">
function submitform(assignName) {
if (assignName) {
var hiddenfield = document.getElementById("hiddenfieldid");
hiddenfield.value = document.getElementById("enteredName").value;
}
var form = document.getElementById("formTest");
form.submit();
}
</script>
Any help would be much appreciated. Hi. I have a question about java script code. I'm creating a website with frames. Within the main page frame, there are tables in the main content page. When I created the website, it fit perfectly in the browser window of my smaller laptop. I just checked it out on my old G5 and the images/pages are too big and either cut off or scroll bars appear (which is not what I want) So I wanted to know what code I put in my files and where to put it? Also, what pages does it need to be in? the main frame index page? the specific pages that fit within the frames? some are images that load in the frames? would i need to create an .html for those and then have the .jpg load so that it can be resized? I need the main page to be resized to fit the browser as well as the pages in the frames to fit. Can you help? Thanks Hi' there Is there anyway to make a custom resize function that resizes one of my div elements on the webpage the same amount of pixels as the browser window gets resized? So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){
//References
var change = $("#menu li a");
var loading = $("#loading");
var content = $("#content");
//Manage click events
change.click(function(){
//show the loading bar
showLoading();
//load selected section
if(this.id == "home")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/index.php", hideLoading);
content.slideDown();
}
else if(this.id == "secondpage")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/secondpage.php", hideLoading);
content.slideDown();
}
else
{
//hide loading bar if there is no selected section
hideLoading();
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) {
function load(num) {
$('#content').load(num +".html");
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... i keep getting the error GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS & Failed to load resource: net::ERR_TOO_MANY_REDIRECTS when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this. thanx in advance i have this code i need to close the parent.html window when the child window opened, i need the code for that working well in IE and Firefox Parent.html <HTML> <SCRIPT TYPE="text/javascript"> function sendTo() { window.open('child.html','_blank','resizable=yes,width='+(screen.width-500)+',height='+(screen.height-500)+''); } </SCRIPT> <BODY > <form name="form"> <input type="text" value="" name="text1" id="pdetails1"> <input type="text" value="" name="text1" id="pdetails2"> </br> <input type="submit" value="submit" onClick="sendTo()"> </BODY> </HTML> child.html <html> <body> <form> <input type=text name="text5" value=""> <input type=submit name="submit"value="submit"> </form> </body> </html> Hello all, and thank you for your coments, I want to preserve a 16/9 aspect ratio to the window after any resize, making the width a function of the height. As I have a window.resizeTo() inside the window.onresize event function, the infinite loop is served. How may I quit it? Code: <html><head><title>Title</title><script languaje="javascript">
const c_ra=16/9;
window.onresize = function WindowReSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
// myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
// myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}
myWidth = Math.floor(myHeight*c_ra);
window.resizeTo(myWidth,myHeight); // ** CAUTION resize event in a onresize event handler !
};
</script></head><body><p>Hello World</p></body></html>
var s="attr" var i=$(s) // jQuery(elem).attr(attr,eval("elm"+attr)); jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this. how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem". hello everybody i need your help and experience for having code to show ( overlay / modal window ) to the user when closing or navigating away from the page ( i want put in this window facebook share to make the user to share the page in his facebook ) , bytheway i wanna use it in my wordpress in every post could it be happen ? Thanks for helping |
|||||||