Develop Reference

jQuery window resize fires alert, doesn't fire function

I have the following pieces of code in my footer:
<script type="text/javascript">
jQuery(document).ready(function($){
var maxHeight1 = 0; $(".header-primary").each(function(){ if ($(this).height() > maxHeight1) { maxHeight1 = $(this).height(); } }); $(".header-primary").height(maxHeight1);
var maxHeight2 = 0; $(".header-secondary").each(function(){ if ($(this).height() > maxHeight2) { maxHeight2 = $(this).height(); } }); $(".header-secondary").height(maxHeight2);
});
<script type="text/javascript">
jQuery(window).resize(function($){
alert('I fire');
var maxHeight1 = 0; $(".header-primary").each(function(){ if ($(this).height() > maxHeight1) { maxHeight1 = $(this).height(); } }); $(".header-primary").height(maxHeight1);
var maxHeight2 = 0; $(".header-secondary").each(function(){ if ($(this).height() > maxHeight2) { maxHeight2 = $(this).height(); } }); $(".header-secondary").height(maxHeight2);
});
</script>
The first piece does its job properly. When I refresh/open the page, the elements that have the CSS classes mentioned inside this JS code, have the same size (of the biggest one).
When it comes to the window.resize part, it doesn't work at all. I've tried all kinds of wrappers to satisfy Firebug, but even when it doesn't display an error, the script still doesn't work. The alert included for testing purposes works, so window.resize fires properly.
I usually find solutions using the search engine, but this one is an exception. :(
HTML:
<div class="block">
<div class="block-big-item">
<h3 class="header-primary">BIG ITEM</h3>
</div>
<div class="block-small-items">
<div class="block-small-item">
<h3 class="header-secondary">SMALL ITEM</h3>
</div>
<div class="block-small-item">
<h3 class="header-secondary">SMALL ITEM</h3>
</div>
</div>
</div>

Want to make a Read more option

I have a Fact box where the content can vary from a p, li or img tags, and the content length may also vary. Therefore, I have tried to make a function that only shows a part of the content, and a button to "read more".
But my problem is that when I use the substring to count where to start, and where to stop, and put the button "read more" in, but it's take both the HTML text and the plain text, but i only need the plain text.
So my question is: How do I remove all HTML text and just get plain text so it does not matter what kind of content that is in my facts box, it will still only show a portion of text, and hide the rest, with a button with option to show more. ??
My function that only show parts off the fact box:
$(document).ready(function () {
var showChar = 100;
var ellipsestext = "...";
var moretext = "Read more";
var lesstext = "less";
$('.showMoreLess').each(function () {
var content = $(this).html();
if (content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar - 1, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext + ' </span><span class="morecontent"><span>' + h + '</span> ' + moretext + '</span>';
$(this).html(html);
}
});
$(".morelink").click(function () {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
and my HTML, and agian it may vary what it contains
<div class="fact-banner">
<h4 class="title">fact headline</h4>
<div class="showMoreLess">
<div class="text">
<p>blablabla</p>
<p>blablabla</p>
<p>blablabla</p>
<p>blablabla</p>
</div
<div class="img">
<div class="image-banner text" style="padding-top: 0;margin-top:0">
<div class="image">
<img src="/bla.jpg" alt="bla" />
</div>
<div class="title">
<p>imageText</p>
</div>
</div>
</div>
<div class="text" style="padding-top: 0; padding-bottom: 0">
Relevant site to the article
</div>
</div>
I hope i make sense :)

Try using .text() instead of .html():
var content = $(this).text();

The wording of your question is definitely confusing. I think what you want is overflow:hidden; and not actually removing tags.
Append a .text-wrapper to your .text. .text-wrapper will have a fixed height when collapsed, and a height auto when expanded. .text-wrapper will have overflow: hidden.
Here's a quick codepen:
http://codepen.io/anon/pen/mVZNvv

from title to data-* by jQuery?

I have a div element
<div class="test2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" >blahblahblah</div>
After magic jQuery script I want that it will be like that
<div class="test2" data-enter="fadeIn" data-exit="fadeOut scaleOut" data-duration="1.2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" > blahblahblah
</div>
So I tried to manipulate with this
<script>
$( document ).ready(function() {
$("[title*='space']").each(function() {
var title = $(this).attr('title');
var titleArray = title.split(" ");
$(this).attr("data-enter", titleArray[1]);
$(this).attr("data-exit", titleArray[2]);
$(this).attr("data-duration", titleArray[3]);
$(this).removeAttr('title');
});
});
</script>
But it doesn't work properly, cause I have data-exit="fadeOut scaleOut" with two properties and my script is for div like that
<div class="test2" title="space fadeIn fadeout 1.2" >blahblahblah</div>
But I don't want it.
Maybe you know right solution for this example. Maybe some find or replaceWith function will help for this.
Thanks. I hope you understood my question.

I think this is job for regular expressions. Something like this:
$("[title*='space']").each(function() {
var title = this.title,
enter = this.title.match(/enter=(.*?)(\s|$)/),
exit = this.title.match(/exit=(.*?)(\s|$)/),
duration = this.title.match(/dur=(.*?)(\s|$)/)
$(this).attr("data-enter", enter[1]);
$(this).attr("data-exit", exit[1].replace(/,/, ' '));
$(this).attr("data-duration", duration[1]);
$(this).removeAttr('title');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" >blahblahblah</div>

jquery popup not correct work in php foreach

I am using this jquery popup
$(document).ready(function() {
// Here we will write a function when link click under class popup
$('a.popup').click(function() {
// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link
var popupid = $(this).attr('rel');
// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();
// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
// Now here we need to have our popup box in center of
// webpage when its fadein. so we add 10px to height and width
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
// Now define one more function which is used to fadeout the
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {
// Add markup ids of all custom popup box here
$('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
return false;
});
});
and it's my php and html code in my foreach loop:
<?php foreach($items as $item){ ?>
<a rel="popuprel" class="popup">click hier</a>
<div class="popupbox" id="popuprel">
<div id="intabdiv">
<?php echo $item->description; ?>
</div>
</div>
<div id="fade"></div>
<?php } ?>
now when click and show popup only echo one item description for all items but I want echo each item description for each item.

The Javascript:
<script>
function show_description(id)
{
$('desc').fadeOut();
$('#description_' + id).fadeIn();
}
</script>
The PHP/HTML:
<?php foreach($items as $item){ ?>
<a rel="popuprel" onclick="show_description(<?=$this->id; ?>);">click hier</a>
<div class="popupbox" id="popuprel">
<div class="desc" id="description_<?=$this->id;?>">
<?php echo $item->description; ?>
</div>
</div>
<div id="fade"></div>
<?php } ?>
I assume you can fetch the ID of your item with "$this->id", that's why I used it in the code.

I found how can do it
i replace all popuprel with this code:
$item->id
it's now work

For each div with same class do something

I have some divs with same class. Inside this divs i added another div to put an ad.
Now i am trying to hide the ad div if the width of the div that holds my ad div is equal to 366px;
I tried the code bellow but it hides only my first ad div..
Example:
<div class="masterdiv">
<div id="myaddiv"></div>
</div>
<div class="masterdiv">
<div id="myaddiv"></div>
</div>
<div class="masterdiv">
<div id="myaddiv"></div>
</div>
and my jquery code is:
var adwidth = $(".masterdiv").width();
if (adwidth == 366){
$('#myaddiv').hide();
}
Thank you!

Because var adwidth = $(".masterdiv").width(); only returns the first value. The answer is in your title, you need to use each. Another issue is ids are SINGULAR, so you need to use a class
Using each:
$(".masterdiv").each( function() {
var elem = $(this);
var width = elem.width();
if (width == 366){
elem.find('.myaddiv').hide(); //use a class since only one element can have an id
}
});
Using filter:
$(".masterdiv").filter( function() {
return ($(this).width() == 366);
}).find('.myaddiv').hide();
The updated HTML:
<div class="masterdiv">
<div class="myaddiv"></div>
</div>

you should not use duplicate ids.use:
$('div .masterdiv').each(function(){
if($(this).width()==366){
$(this).find('div').hide();
}});

Try:
$('.masterdiv').each(function(){
if($(this).width()==386){
$(this).hide();
}
});

This is only doing the first div because you are using id's instead of classes. Since there can only be one id per page javascript stops after matching the first one. change to classes and you should be fine.

you are using same id's for different divs
Instead of id, give class name
<div class="masterdiv">
<div class="myaddiv">
</div>
</div>
<div class="masterdiv">
<div class="myaddiv">
</div>
</div>
<div class="masterdiv">
<div class="myaddiv">
</div>
</div>
$(document).ready(function () {
var adwidth = $(".masterdiv");
for (i = 0; i < adwidth.length; i++) {
if ($(adwidth[0]).attr("width") == 366) {
$(this).find('.myaddiv').hide()
}
}
});

$(".masterdiv").each(function(){
var current = $(this);
if(current.width() == 366) {
current.hide();
}
});

You have to change in this way:
$('#myaddiv', '.masterdiv').each(function() {
var width = $(this).width();
(width > 366) ? $(this).hide() : 0;
});
You can try on this live DEMO