|
JavaScript - [jquery Ui] Resize 2 Divs By A Handle
I'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? Similar Tutorialshi, 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 I have 3 divs (boxes) next to each other, I can input text via a textarea to each. I need all 3 to resize - be the same size on text overflow - so if box a gets 100 lines of code and resizes, the other 2 should follow. I have written this js, and added it to the button which moves the text to the boxes (to the onclick) Code: // JavaScript Document
function adjust()
{
if (document.getElementById('section1').style.height != 380 + "px")
{
document.getElementById('section2').style.height === document.getElementById('section1').style.height;
document.getElementById('section3').style.height === document.getElementById('section1').style.height;
}
else if (document.getElementById('section2').style.height != 380 + "px")
{
document.getElementById('section1').style.height === document.getElementById('section2').style.height;
document.getElementById('section3').style.height === document.getElementById('section2').style.height;
}
else if (document.getElementById('section3').style.height != 380 + "px")
{
document.getElementById('section1').style.height === document.getElementById('section3').style.height;
document.getElementById('section2').style.height === document.getElementById('section3').style.height;
}
}
any ideas what's wrong here? 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! 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.
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 Hi everyone I need some help creating a function which does the same thing for the chosen elements. I have #design1 #design1servicetext and #design1servicebutton. Code: //Service hover//
$('#design1').mouseenter(function (){
$('#design1servicetext').css('background-position', '0 -91px')
$('#design1servicebutton').css('background-position', '0 -33px')
})
.mouseleave(function (){
$('#design1servicetext').css('background-position', '0 0px')
$('#design1servicebutton').css('background-position', '0 0px')});
//Service hover end//
How can I create a function, in which I have to choose 3 divs to do the animation? A function like Code: animatebg('#design1','#design1servicetext','#design1servicebutton');
Can someone please help me? I've tried so many function tutorials but none of them worked for what I wanted to do. Thank you a lot in advance! Hello all, I'm still learning java. I have the concept of hide/show down, but want I want to do is when a div is shown, all the other divs are hidden, and when I click on another div to show, the other one hides, etc. This is my code for jquery show/hide: Code: <script type="text/javascript">
$(document).ready(function(){
$('#{field_label}').hide();
$('input#show{field_label}').click(function(){
$('#{field_label}').show('fast');
});
$('input#close{field_label}').click(function(){
$('#{field_label}').hide('fast');
})
});
</script>
What do I need to add so that the previous DIV that was open, auto closes when a NEW DIV is enabled to show. Much appreciated Coders! Good day/evening. I am trying to reload the contents of a div asynchronously using jquery. It works fine if the link/button to do so is outside of the div I am reloading, but I need the button to be inside the div I am reloading and it does not work if I do it from there. I have thought about overlaying divs but I need the buttons to be very exactly positioned as its a graphical representation of a map and recoding the way the buttons are placed would not only annoy me but be very difficult. You see its an isometric view of a square, and the buttons need to be placed right along the edges of the 'diamond' therefore always coming inside or on top of the div that contains the map view. So, is what I am trying to do impossible or might I just be going about it the wrong way ? If it is the latter then I will post some code. Thanks in advance. EDIT: sorry, I didn't see the frameworks forum for Jquery stuff, if a mod could please move this thread in there then that would be just fab. I have made a code which is for a 9 tile picture puzzle.And i have done it for click event.now i want to make it possible to drag and drop to swap divs rather than clicking.So how do i swap divs with only javascript.[p.s my divs are dynamically created]
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? Hello people, I got a problem. This is the code for hiding en showing informatie in an acordion. It looks fine and it works! But it only handles one div! The main thing i want is that when i click on the text "button" the next div, with all the span's within it, has to slide under. Example: HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accordion 1</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion div:not(:first)").hide();
$(".accordion div").hide();
$(".accordion p").hide();
$(".accordion h3").click(function(){
$(this).next("div").slideToggle("slow").siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
$(".accordion p").show();
$(".accordion .button").show();
});
});
</script>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div class="accordion">
<h3>Title</h3>
<div class="test">
<p>subtext</p>
<div class="button"> <a href="" title="">Button</a> </div>
</div>
<div>
<span style="display:block; height: 20px; width: 220px; margin-top: 10px; margin-left: -5px;"><input type="radio" checked="checked" value="" name="" id="" /><label for="">test</label></span>
<span style="display:block; height: 20px; width: 220px; margin-top: 0px; margin-left: -5px; margin-bottom: 20px;"><input type="radio" value="" name="" id="" /><label for="">test</label></span>
<span style="font-weight:bold;">Vanaf<input type="text" style="width: 20px; height: 15px;" class="" value="1" readonly=""></input>-<input type="text" style="width: 20px; height: 15px;" class="" value="" readonly=""></input>-<input type="text" style="width: 40px; height: 15px;" class="" value="1" readonly=""></input> change to <input type="text" style="width: 20px; height: 10px;" class="" value="" readonly=""></input>%</span>
<span style="display:block; text-align: right; text-decoration:underline; font-weight:bold; color: red;">count</span>
</div>
</div>
</body>
</html>
CSS: Code: body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #004584;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
color: #FFFFFF;
}
.accordion h3:hover {
background-color: #00AEE7;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion .test {
background: #DFF7FF;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
.accordion .extra {
background: #DFF7FF;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
I need to interact with application in a way that is being used by mouse and some keyboard clicking like save a text file to a desired location with a desired name by the java script file. Can you give me some information how to do that, and where to get information for that?
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 am very new to HTML,CSS,Javascript coding. I have to add some check box in the page and there are multiple tabs in the same single page. If I select or deselect any check box, checkbox checks from all the places should be changed. Can anybody tell me how to do so using HTML,CSS, Javascript? 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 currently am using a mootools popup on www.Hope1st.com to play his music videos.....and its working really well...only thing is on some computers (mac with firefox browser) when someone pauses the video ...the draggable box gets stuck on their mouse weird right? yea i know... so i thought of a solution...instead of the whole box being draggable why not just the black titlebar be draggable? i have absolutely no idea on how to do this....but i do have the entire JS code....are you ready? its a mouthful....a million thanks to whoever is talented enough to help me Code: var mooSimpleBox = new Class({
options: {
width: 300,
height: 200,
opacity: '0.8',
btnTitle: "Ok",
closeBtn: null,
boxTitle: "messageBox",
boxClass: 'mainBox',
id: 'myID',
fadeSpeed: 500,
box: null,
addContentID:null,
addContent: null,
boxTxtColor: '#000',
isVisible: false,
isDrag: true
},
initialize: function(options){
this.isVisible = false;
if(options['isDrag']) this.isDrag = options['isDrag'];
if(options['width']) this.width = options['width'];
if(options['height']) this.height = options['height'];
if(options['opacity']) this.opacity = options['opacity'];
if(options['btnTitle']) this.btnTitle = options['btnTitle'];
if(options['boxTitle']) this.boxTitle = options['boxTitle'];
if(options['boxClass']) this.boxClass = options['boxClass'];
if(options['boxTxtColor']) this.boxTxtColor = options['boxTxtColor'];
if(options['fadeSpeed']) this.fadeSpeed = options['fadeSpeed'];
if(options['id']) this.id = options['id'];
if(options['closeBtn']) this.closeBtn = $(options['closeBtn']);
if(options['addContentID']) this.addContentID = options['addContentID'];
if(options['addContentID']) {
this.addContent = $(this.addContentID).innerHTML;
$(this.addContentID).setStyle('visibility','hidden');
$(this.addContentID).remove();
}
this.createBox();
},
createBox: function(){
this.box = new Element('div');
this.box.addClass(this.boxClass);
},
clickClose: function(){
$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){
}).start(this.opacity,0); this.box.setStyle('display','none');
this.isVisible = false;
},
fadeOut: function(){
if(this.isVisible){
$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){
}).start(this.opacity,0);
this.isVisible = false;
}
},
fadeIn: function(){
if (document.documentElement && document.documentElement.clientWidth) {
theWidth=document.documentElement.clientWidth;
}else if (document.body) {
theWidth=document.body.clientWidth;
}
if (window.innerHeight) {
theHeight=window.innerHeight;
}else if (document.documentElement && document.documentElement.clientHeight) {
theHeight=document.documentElement.clientHeight;
}else if (document.body) {
theHeight=document.body.clientHeight;
}
var top = window.getScrollTop();
var boxTop = (theHeight - this.height) / 2 ;
boxTop = (boxTop + top);
var boxLeft = (theWidth - this.width) / 2;
this.box.setStyle('top',boxTop);
this.box.setStyle('left',boxLeft);
this.box.setStyle('position','absolute');
this.box.setStyle('width',this.width);
this.box.setStyle('height',this.height);
this.box.setStyle('opacity',this.opacity);
this.box.setStyle('cursor','move');
this.box.setStyle('z-index','999990000');
this.box.setAttribute('id', this.id);
this.box.setStyle('visibility','hidden');
this.box.injectInside(document.body);
if(this.isVisible == false){
this.box.effect('opacity',{ wait:true, duration: this.fadeSpeed, transition: Fx.Transitions.linear }).start(0,this.opacity);
this.addHT();
this.isVisible = true;
}
},
addHT: function(){
this.closeBtn = new Element('button', {
styles: {
'border': 'none',
'background-image':'url(modules/mod_moopopup/moopopup/images/bg_button.gif)',
'color':'#fff',
'position':'absolute',
'bottom':'3px',
'right':'3px',
'width':'44px',
'height':'19px',
'font-size':'13px',
'font-weight':'bold',
'font-family':'arial',
'cursor':'pointer'
}
})
var width = this.width.toInt() + 5;
if(window.ie){
var titleBar = new Element('div', {
styles: {
'width' : width,
'height': 'auto',
'background-repeat': 'repeat-x',
'background-position': 'right top',
'line-height': '20px',
'padding': '5px 5px 5px 10px',
'position': 'absolute',
'clear': 'both',
'margin-bottom': '10px',
'top': '0px',
'left': '0px',
'color': '#eee'
}
})
}else{
var titleBar = new Element('div', {
styles: {
'width' : width,
'height': 'auto',
'background-repeat': 'repeat-x',
'background-position': 'right top',
'line-height': 'auto',
'padding': '5px 5px 5px 10px',
'position': 'absolute',
'clear': 'both',
'margin-bottom': '10px',
'top': '0px',
'left': '0px',
'color': '#eee'
}
})
}
$(titleBar).innerHTML = this.boxTitle;
var insideDiv = new Element('div',{
styles: {
'padding':'10px'
}
});
insideDiv.setAttribute('id','myContent');
this.box.innerHTML = "";
insideDiv.injectInside(this.box);
insideDiv.innerHTML = this.addContent;
this.closeBtn.innerHTML = this.btnTitle;
$(this.closeBtn).addEvent('click',this.clickClose.bindWithEvent(this));
titleBar.injectInside(this.box);
this.closeBtn.injectInside(this.box);
if(this.isDrag == 'true'){
this.box.makeDraggable();
}
}
});
mooSimpleBox.implement(new Options, new Events);
Hi I am generating a report on submit click.Due to size of data query execution takes some time to display result, in mean time if user press reload button on browser toolbar consequently same query request going to database and the performance become slow down. I am able to restrict user from clicking F5 and ctrl+R button but not reload button. I there any way to handle event on reload button? or can we disable reload button on submit? Thanks in advance! Dear friends, My Function code is: [code] <script language="javascript" type="text/javascript"> //function to create the printer and take variable from button pressed by user function RunEXE(prn) { var oShell = new ActiveXObject("WScript.Shell"); oShell.Run ("%comspec% /k c:\windows\system32\rundll32 PRINTUI.DLL,PrintUIEntry /in /n "+prn+"",2,true); } </script> the variable is passed properly to the function with spaces using below form button. But, the command in the function doesnot execute after the space, that is printer name is taken as "5E-" only. How do i pass prn variable with additional double quotes, so that command in function takes it in full including spaces. thanks so much. [code] <input name="button2132" type="button" id="button213" onClick="RunEXE('\\\\printsrv.test.com\\5E- KMC451-SS AC')" value="Install" /> Hello all, I have a requirement where i need to take an IPv4 address as an input, my web page has 4 text boxes. If i have a address like this 255.255.255.255, my program jumps into the next text box without any problem as soon as i enter the 3 digits. i dont need to press any tab or any other key to go to next text box. In case of an address like 12.24.12.3, i have to press <tab> to jump into the next text box, My project requirement says that it should work with '.' (dot) char as well. SO here is my actual requirement i need to jump into the next text box as soon as user enters a dot (.) char without displaying the dot into the text box. I am writing this program in perl CGI. Thanks, Vaibhav |
|||||||