resize two elements simultaneously using jquery/js - javascript

i have been trying to resize two windows simultaneously but for some reason it doesnt work.
i tried to catch errors but nothing.
Note: i dont want to use jquery resize since it doesnt have a fast inteval for checking resizes
JAVASCRIPT:
function _u(e){
try {
e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directy with prev('.first')
} catch(err){alert(err);}
}
$(document).ready(function(){
$(".data").each(function(){
var resizerint;
$(this).mousedown(function(){
try {
var eee = $(this);
var resizerint = setInterval(function(){
try {
_u( eee );
} catch(err){alert(err);}
},10); // i need it 10ms
} catch(err){alert(err);}
$('.test').html('<font style="position:absolute;top:0;right:0;color:red;"> mouse DOWN </font>');
}).mouseup(function(){
try{
clearInterval(resizerint);
} catch(err){alert(err);}
$('.test').html('<font style="position:absolute;top:0;right:0;color:green;"> mouse UP </font>');
});
});
});
and HTML:
<div class="boss">
<div class="first">
<table>
<tr>
<td>
<div class="title">ONEEEEE</div>
</td>
</tr>
</table>
</div>
<div class="second">
<textarea class="data" > ONEEE TEXTY TESTY NJAMMM! </textarea>
</div>
</div>
<div class="boss">
<div class="first">
<table>
<tr>
<td>
<div class="title">TWOOOOOO</div>
</td>
</tr>
</table>
</div>
<div class="second">
<textarea class="data" > TWOOO TEXTY TESTY NJAMMM! </textarea>
</div>
</div>
<div class="text"></div>
Thank you in advance for any help you can provide.
JSFIDDLE (IF YOU SEE , THE BLUE DOESNT RESIZE WHEN MOUSEDOWN at the TEXTAREA )
http://jsfiddle.net/2sfFW/

My first answer was that there was a missing "$" but it didn't fix the problem.
Got it working to some extent, but you have to click into the text field first before it will initialize. I used your blue version as a visualizer.
The proper jquery traversal is
e.parent().parent('.boss').find('.first')
or
e.parents('.boss').find('.first')
You have to use the plural version because there are two parent divs above it. Using parent().parent() is more specific but probably not necessary in this case.
http://jsfiddle.net/aQKVD/1/
If you remove the mouseup/mousedown handlers it will initialize at document.ready instead, which I think might be what you want. You don't necessarily need to do the clearing of the variable unless you have some other need for it, since .each() creates a separate instance of the function tied to the specific div in question. Here's a version like that:
http://jsfiddle.net/aQKVD/2/

Doesn't fix it in JSfiddle, but for starters you've left off a "$". I've set up a JSfiddle link so other people can try it. http://jsfiddle.net/aQKVD/
function _u(e){
try {
e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directly with prev('.first')
} catch(err){alert(err);}
}
$(document).ready(function(){
(".data").each(function(){
last line should be
$(".data").each(function(){

Related

Hiding div that contains specific string

I've been trying to hide divs that contain particular string using the other solutions suggested on this site, however none worked (most likely due to my inexperience with jQuery)
I'd like to completely hide all divs that (in this example) contain the string 'zynthesized'
<div class="photos-wrapper" id="detailPhoto-977355202965894535_11842652">
<div class="pseudo">
zynthesized
</div>
<div class="image-wrapper">
<img src="https://scontent.cdninstagram.com/hphotos-xfp1/t51.2885-15/s150x150/e15/11195725_518243828313545_1133319712_n.jpg"></div>
<div class="activites">
<span class="popular_picto ss-star "></span>
<div class="album-relative detail-photo-album-977355202965894535_11842652" style="display: none;">
<input type="hidden" class="apalbumsPhoto" value="977355202965894535_11842652">
<input type="hidden" class="apalbumsPhoto-977355202965894535_11842652" value="">
</div>
<span class="nb_comment_score">0</span>
<span class="comment_picto ss-chat"></span>
<span class="nb_like_score">4</span>
</div>
<div class="nouveau-commentaire">
<textarea id="comment-977355202965894535_11842652" class="textareaCommentaire" placeholder="Your comment"></textarea>
<img src="http://static.iconosquare.com/images/loading.gif" class="commentLoading">
</div>
</div>
From what I've seen something like
$('.photos-wrapper:contains("zynthesized")').hide()
Should be closest to what I need, but I've had no luck with it.
Any help would be amazing!
Thanks for the help guys! Turns out that the script was working however as the page loaded new divs automatically when scrolling, the script had to be run after the page loaded them.
The final script looks like
$(window).load(function(){
$(".photos-wrapper:contains('zynthesized')").hide();
});
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 150;
if(y_scroll_pos > scroll_pos_test) {
$(".photos-wrapper:contains('zynthesized')").hide();
}
});
Hopefully this helps anyone looking to do something similar!
You can simply use a regex.
<script>
var ptrn = /zynthesized/g;
$( "div" ).each(function( index ) {
if(ptrn.test($( this ).text())){
$( this ).hide();
}
});
</script>
Here is simple snippet : jsfiddle.net/dariubs/hgbm3doa

Selecting a div unselects the other divs like a radio button?

I have created a list of divs using a loop from the database..
when i click select..it becomes like
the problem i am facing is that at a time i can select only one company...how could i select a nother company that will make the previous selected company unselect...
the program is like this...
{section name=i loop=$id7}
<div class="company" style="width:220px; height:220px; background-color:white;margin-left:12px;margin-bottom:22px;float:left;" >
<div id="ctable">
<table style="margin-top:20px;margin-left:18px;width:178px;height:149px;">
<tr style="text-align:center;">
<td colspan="2" align="center" valign="center" height="42px">{$id7[i].vCompanyName}</td>
</tr>
<tr>
<td colspan="2" align="center" valign="center" height="107px">
<img src="{$tconfig.tsite_images}{$id7[i].vImage}">
</td>
</tr>
</table>
</div>
<div id="selecty" class="{$id7[i].iEmployerId}" style="width:178px;height:32px; margin-left:18px;">
Select
</div>
<div id="selected_state" style="width:198px;height:32px;display:none;background-color:white;margin-left:16px;">
<img src="{$tconfig.tsite_images}tick.png" /> <font color="#cdcdcd"><b>Company selected</b></font>
</div>
</div>
{/section}
and its javascript is like this
<script>
function selecty_hide (eid,compid) {
alert(eid);
alert(compid);
document.getElementById('selecty').style.display="none";
document.getElementById('selected_state').style.display="block";
document.getElementById('eid').value=eid;
}
</script>
Say you have a class(selected_company) for selected company div.
When someone choose any other div then get previous selected div and remove this class then add this class in current selected div.
Something like this:
$(".selected_company").removeClass('selected_company');
$(this).addClass('selected_company');
Then at a time only one company will be selected.
Here is an example demo: http://jsfiddle.net/kRD4S/
Well little modification in javscript can be done as below
<script>
function selecty_hide (eid,compid,element) {
alert(eid);
alert(compid);
document.getElementById('selecty').style.display="none";
document.getElementById('ctable').style.display="none";
document.getElementById('selected_state').style.display="none";
element.style.display="block";
document.getElementById('eid').value=eid;
}
need to pass another parameter during function call(3rd param) as 'this'
onclick="selecty_hide('{$id7[i].iEmployerId}','{$smarty.section.i.index}',this)"
The script above will first display none all the div with id selecty,ctable,selected_state and this will display block the selected div.
Hope this Help you
If you can use jquery it is easy
<div class="mydiv" style="cursor: pointer;">
box 1
</div>
<div class="mydiv" style="cursor: pointer;">
box 2
</div>
<div class="mydiv" style="cursor: pointer;">
box 3
</div>
<script type="text/javascript">
$(".mydiv").click(function() {
if($(this).hasClass("selected") == false) {
$(".mydiv").removeClass("selected");
$(this).addClass("selected");
} else {
$(".mydiv").removeClass("selected");
}
});
</script>
This will remove the class "selected" from all elements with class "mydiv" and then add it to the single element you have clicked.
It also supports unselecting the current element + you can drop your buttons completely it is enough to click on the div!
You should be able to adjust my example to your code.
All you need to do now is define a custom class for the div that will display its content different like only show "company selected" when the div has the class "selected".
Have fun and good luck!
Think of it slightly different. If Company A is selected, and the user now selects Company B:
Unselect ALL elements.
Now select Company B
If you do it like this, there's no hassle in trying to figure out which company you need to unselect.
Something like this:
$(".company").click(function() {
//remember the new item
var clickedItem = $(this);
//unselect everything
$(".company").removeClass("companySelected");
//select the company that was clicked
clickedItem.addClass("companySelected");
});
Look, its simple, you can just solve your problem this way: Adding and removing CSS Classes.
I have made a full JSFiddle here to you know what i'm talking about.
Modified the HTML Company Div to be only one and not two divs:
<div id="selecty" class="selectable_state" onclick=select_unselect('{$id7[i].iEmployerId}','{$smarty.section.i.index}') >
Select
</div>
And modified the js:
function select_unselect(eid,compid){
alert(eid);
alert(compid);
if ($(this).hasClass('selectable_state'))
{
$(this).removeClass('selectable_state');
$(this).addClass('selected_state');
$(this).html('Company Selected');
$('#eid').val(eid);
}else{
$(this).removeClass('selected_state');
$(this).addClass('selectable_state');
$(this).html('Select');
$('#eid').val('');
}
}
Ps: please note that in the fiddle i removed some parameters of the function to make it work because i do not have all the data to make it work properly.

Change color of text if value changes, JS or Jquery

I have a div that looks like this:
<div class="ProductPriceWrap">
<div class="DetailRow RetailPrice" style="display: none; ">
<span class="Label">MSRP:</span>
</div>
<div class="DetailRow PriceRow" style="">
<div class="Value">
<em class="ProductPrice VariationProductPrice">$42.00</em>
</div>
</div>
</div>
I need a script that changes the color of the price value to red if it changes. I started by getting the value when the page loads and figured I could do something like, if < original value, style red, but I am still new to JavaScript and cant quite work it out.
Any input is appreciated! Thanks!
At first I would at an ID:
<em id="price" class="ProductPrice VariationProductPrice">$42.00</em>
then you can make something like
if ($("#price").text().substr(1) < original_value) {
$("#price").css("color","red");
}
And the if statement should be inside your change function
You need to have a input to be able to have a event on change.
So my suggestion is to add a input (you can remove the border to not look like a input), and add a class that applies the color red.
html
<input id="Input_id" class="ProductPrice VariationProductPrice" value="$42.00">
jQuery
$(document).ready(function () {
$('#Input_id').on('change', function () {
$(this).addClass('red');
});
})
Demo here

How to move content of div into another

If i have for example divs with the class="text1", that have an a-tag with the class"text" over them.
<a class="text">ClickHere1</a>
<div class="text1" style="display: none">
<p>Hey</p>
<p>Ho</p>
</div>
<a class="text">ClickHere2</a>
<div class="text1" style="display: none">
<p>Hey</p>
<p>Ho</p>
</div>
<div id="Content">
</div>
How can i move the content of the class="text1" into the div with the id="Content" when the user clicks on an a-tag that is directly over the div wit class"text1". Or better said that when an user clicks on an a-tag only the content of the next div with the class="text1" is appended to the div with the id:Content.
Also im asking me how i can insure that in the div with the id:Content always only content of one div is displayed!
Thanks and i hope you understand me !
Do you want to move, or copy?
To copy the text:
$(".text").click(function() {
$("#Content").html($(this).next(".text1").html());
});
If you want to move the text, use
$(".text").click(function() {
$("#Content").html($(this).next(".text1").html());
$(this).html('');
});
Try this one:
$("a.text").on("click",function(){
$("#Content").html( $(this).next(".text1").html() );
})
Fiddle: http://jsfiddle.net/4w3Hy/1/
Haven't tested it, but you're looking for something like this. This should give you an idea
$(function(){
$(".text").click(function(){
var contentClone = $(this).next().html().clone();
contentClone.insert($("#Content"))
});
})
Moving the content
$("a.text").click(function(){
$("#Content").html($("this")next().html());
})
You may try this
$('.text').on('click', function(){
$('#Content').html($(this).next('div.text1').html());
});
DEMO.

jQuery .hover() only working in FireFox

I need to add informational popups to several menu items, and Im using jQuery .hover to do so. However this only works in Firefox and does not work in Safari, Chrome or Opera.
var Main = function() {
//other functions...
function _setPopups() {
$(".dt_event_title a").hover(
function(){
$(".info_popup",this).css({"display":"block"});
//$(".info_popup",this).fadeTo("normal",1);
//$(".info_popup",this).fadeIn("normal");
//$(this).find(".info_popup").fadeIn("normal");
},
function(){
$(".info_popup",this).css({"display":"none"});
//$(".info_popup",this).fadeTo("normal",0);
//$(".info_popup",this).fadeOut("normal");
//$(this).find(".info_popup").fadeIn("normal");
}
);
}
return {
//other methods...
"setPopups" : function(){ _setPopups(); }
};
}();
$(document).ready(function(){
//other method calls...
Main.setPopups();
});
My other methods are working in the context so my closure is fine. The commented-out jQuery lines represent other transformations I tried that produced the same results: works in Firefox, but not others. I'm not sure what I could be doing wrong.
FYI the .info_popup div is given a css style display:none in an external style sheet to hide it.
Any help would be appreciated.
***Here is some of the html... note this represents the output, the html is largely generated by php
<tr class="dt_event_title">
<td>
<a class="dt_event_link" href="...php generated link...">
<span class="info_icon"></span>
<span class="event_title">Title of Event</span>
</a>
<div class="info_popup">
...some php generated content
</div>
<div class="dt_event_date">
09-15-2010 02:00 pm - 02:00 pm
</div>
</td>
</tr>
Ok Here is the latest rearrangement of my code. The HTML now looks like this:
<tr>
<td>
<div class="dt_event_title">
<a class="dt_event_link" href="php generated link">
<span class="info_icon"></span>
<span class="event_title">php generated title</span>
</a>
<div class="dt_event_date">php generated date</div>
<div class="info_popup">
<div class='popup_title'>php generated title</div>
<div class='popup_date'>php generated date</div>
<div class='popup_time'>php generated time</div>
<div class='popup_arrow'></div>
</div>
</div>
</td>
</tr>
And the javascript looks like this:
var Main = function() {
function _setPopups() {
$(".dt_event_title").hover(
function(){
$(".info_popup",$(this)).fadeIn("fast");
},
function(){
$(".info_popup",$(this)).fadeOut("fast");
}
);
}
return {
"setPopups" : function(){ _setPopups(); }
};
}();
$(document).ready(function(){
Main.setPopups();
});
And still the same problem.
(Edited to use your html)
Since you are specifying a selector context (adding ,this to your selector), the .info_popup element must be inside the this element. Notice how the info_popup div is inside the a element. I'm not sure that's what you want, but it matches your code. Since your info_popup is outside the a element, use $(this).parent() as your selector.
I tossed this into a jsFiddle for you. I am using it in Chrome and it works.
Code below also:
HTML
<table>
<tr class="dt_event_title">
<td>
<a class="dt_event_link" href="...php generated link...">
<span class="info_icon"></span>
<span class="event_title">Title of Event</span>
</a>
<div class="info_popup">
...some php generated content
</div>
<div class="dt_event_date">
09-15-2010 02:00 pm - 02:00 pm
</div>
</td>
</tr>
</table>​
CSS
.info_popup { display:none; }​
JS
var Main = function() {
//other functions...
function _setPopups() {
$(".dt_event_title a").hover(
function(){
$(".info_popup",$(this).parent()).show(); //switched to .show() and $(this).parent()
//$(".info_popup",this).fadeTo("normal",1);
//$(".info_popup",this).fadeIn("normal");
//$(this).find(".info_popup").fadeIn("normal");
},
function(){
$(".info_popup",$(this).parent()).hide(); //switched to .hide() and $(this).parent()
//$(".info_popup",this).fadeTo("normal",0);
//$(".info_popup",this).fadeOut("normal");
//$(this).find(".info_popup").fadeIn("normal");
}
);
}
return {
//other methods...
"setPopups" : function(){ _setPopups(); }
};
}();
$(document).ready(function(){
//other method calls...
Main.setPopups();
});​

Categories