I have a <div> with three span4s inside it, with a hero-unit inside each span4. Inside each hero unit is some text and a picture.
Here is a demo: http://jsfiddle.net/GGMWX/256/
And the code, in case that link breaks in the future:
<div class="row-fluid">
<span class="span4">
<div class="hero-unit" id="col1">
<h1 class="heading">One</h1>
<p>Lorem ipsum</p>
<img src="http://dummyimage.com/100x400/000/fff" class="image" />
</div>
</span>
<span class="span4">
<div class="hero-unit" id="col2">
<h1 class="heading">Two</h1>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
<img src="http://dummyimage.com/100x200/000/fff" class="image" />
</div>
</span>
<span class="span4">
<div class="hero-unit" id="col3">
<h1 class="heading">Three</h1>
<p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
<img src="http://dummyimage.com/100x200/000/fff" class="image" />
</div>
</span>
</div>
I can't for the life of me figure out how to make all hero-units the same height. I have tried the following but none of them work for various reasons (some of them only work for text with no picture, one of them just works for plain text with no tags inside the outer div tag). Or perhaps I'm missing something -- I'm new to this.
http://tomdeater.com/jquery/equalize_columns/
http://jsfiddle.net/4HxVT/
http://www.filamentgroup.com/examples/equalHeights/ and http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
Any ideas?
You have to iterate the items once the document has loaded, get the tallest one, and then set them all to that height like so:
highest = null
hi = 0;
$(".hero-unit").each(function(){
var h = $(this).height();
if(h > hi){
hi = h;
highest = $(this);
}
});
if(highest !== null){
$('.hero-unit').css('height', highest[0].scrollHeight + "px");
}
http://jsfiddle.net/GGMWX/261/
Related
This is my HTML Code:
<div class="desc">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-1.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-2.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-3.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-4.jpg">
</div>
This is my JavaScript code:
$(document).ready(function() {
$('.desc img').addClass('thumb lazyload').attr('data-src', $('.desc img').attr('src') ).attr('src','img/ui/logo/lazy.jpg');
});
I want the code to be as below, but the JavaScript code does not work:
<div class="desc">
<p>Lorem ipsum dolor sit amet,....</p>
<img class="thumb lazyload" src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-1.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img class="thumb lazyload" src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-2.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img class="thumb lazyload" src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-3.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img class="thumb lazyload" src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-4.jpg">
</div>
Consider the following.
$(document).ready(function() {
$('.desc img').each(function(i, el) {
$(el).addClass('thumb lazyload').attr({
'data-src': $(el).attr('src'),
'src': 'img/ui/logo/lazy.jpg'
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="desc">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-1.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-2.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-3.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-4.jpg">
</div>
This code itereates over each of the selected items and makes the change for each element. Your code is ambiguous and you may not get the results you expected.
See more: https://api.jquery.com/each/
$('.desc img').attr('src') returns the attribute of the first element matching the selector, not the element whose data-src attribute is being set.
You can give a function as the second argument to .attr(). The function will be called with this equal to the current element, and its return value will be used for that element.
$(document).ready(function() {
$('.desc img').addClass('thumb lazyload').attr('data-src', function() {
return this.src;
}).attr('src', 'img/ui/logo/lazy.jpg');
});
<div class="desc">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-1.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-2.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-3.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-4.jpg">
</div>
document.querySelector('[src="img/ui/logo/lazy.jpg"]').classList.add([mention classname you want to add]);
This is how you can add or remove classname or can change attr
I am able to get the image source when I click on the image...
document
.querySelectorAll('.module img')
.forEach(el => el.addEventListener("click", e => {
console.log(e.target.currentSrc)
});
<div class="module">
<img src="pics/pic1.jpg">
<h2>Title</h2>
<p>Lorem impsum dolor sit amet</p>
</div>
<div class="module">
<img src="pics/pic2.jpg">
<h2>Title</h2>
<p>Lorem impsum dolor sit amet</p>
</div>
<div class="module">
<img src="pics/pic3.jpg">
<h2>Title</h2>
<p>Lorem impsum dolor sit amet</p>
</div>
...but how can I get the image source no matter where I click in the parent div, without doing event listeners for each child element?
You can do something like this.Add a listener to the whole div with class selector.
document.querySelectorAll(".module").forEach(ele => {
ele.addEventListener("click", function() {
console.log(this.children[0].getAttribute('src'))
})
})
<div class="module">
<img src="pics/pic.jpg">
<h2>Title</h2>
<p class="usp">Lorem ipsum</p>
<p>Lorem impsum dolor sit amet</p>
</div>
Whatever your solution, it sounds like you will need to get info from either this, or the event passed into the event listener:
document
.querySelectorAll('.module')
.forEach(el => {
el.addEventListener("click", e => {
console.log(e.currentTarget.querySelector('img').currentSrc);
});
});
<div class="module">
<img src="pics/pic.jpg">
<h2>Title</h2>
<p class="usp">Lorem ipsum</p>
<p>Lorem impsum dolor sit amet</p>
</div>
<div class="module">
<img src="pics/pic2.jpg">
<h2>Title</h2>
<p class="usp">Lorem ipsum</p>
<p>Lorem impsum dolor sit amet</p>
</div>
<div class="module">
<img src="pics/pic3.jpg">
<h2>Title</h2>
<p class="usp">Lorem ipsum</p>
<p>Lorem impsum dolor sit amet</p>
</div>
Add an event listener to the parent, and do not use event.stopPropagation()
var el = document.querySelector(".module");
el.addEventListener("click", function(ev){
// Parent div clicked, get the image element ref
var img = document.querySelector(".module img");
alert(img.currentSrc)
// Image src alerted
})
This is how my child component looks like:
<template>
<div class="body">
<div class="block">
Lorem ipsum dolor sit amet
</div>
</div>
</template>
<script>
export default {
name: 'block'
}
</script>
From my parent component, I want to do something like this:
<div>
<block></block>
<block></block>
<block></block>
</div>
...but without the surrounding root .body div element being replicated each time.
I want something like this:
<div class="body">
<div class="block">
Lorem ipsum dolor sit amet
</div>
<div class="block">
Lorem ipsum dolor sit amet
</div>
<div class="block">
Lorem ipsum dolor sit amet
</div>
<div class="block">
Lorem ipsum dolor sit amet
</div>
</div>
Instead of this:
<div class="body">
<div class="block">
Lorem ipsum dolor sit amet
</div>
</div>
<div class="body">
<div class="block">
Lorem ipsum dolor sit amet
</div>
</div>
<div class="body">
<div class="block">
Lorem ipsum dolor sit amet
</div>
</div>
From your question this is what I understand.
Make your single file vue component like this.
<template>
<div class="block">
Lorem ipsum dolor sit amet
</div>
</template>
<script>
export default {
name: 'block'
}
</script>
Your parent div:
<div class="body">
<block></block>
<block></block>
<block></block>
</div>
Try to use tag as your root tag. I used to do this and works well.
It is like:
<template>
<literal>
<div id="1"></div>
<div id="2"></div>
</literal>
</template>
I have just started using angular ui-router.
I wanted to know, when i am specifying a templateUrl, i can see that the template is injected into the element of the ui-view, for example:
<div ui-view="myState"></div>
.state('myState', {
url: '/myState',
templateUrl: 'partials/my-state.html'
})
Results in:
<div ui-view="myState">
<section class"ex1 exa">
<p>Lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum</p>
</section>
</div>
When what i am after is:
<section class"ex1 exa">
<p>Lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum</p>
</section>
So essentially the <div ui-view="myState"> has been replaced.
I know within directives, you can use transclude and replace, does the ui-router have such an ability within it?
I have following code and I have gone through many SO question but still I am not able to make it run.
I want to use toggle but problem is that It is opening all the class related to this.What I want is to toggle only class that is clicked.
I have tried e.preventDefault , e.stopPropagation(); and return false.But none of them worked for me.
NOTE I don't know the use of above mentioned three.I have used them at the end not at the beginning.
$(".read").click(function(e){
//e.preventDefault();
$(".expand").toggle();
return false;
});
.expand{display:none;background:#000;color:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
Problem that $(".expand") returns all elements that has class .expand, but you need get only one element. You can do it like this
$(".read").click(function(e){
$(this).next('.expand').toggle();
return false;
});
Demo: http://jsbin.com/marale/1/edit?html,js,output
$(".read").click(function(e){
//e.preventDefault();
$(this).next(".expand").toggle();
return false;
});
.expand{display:none;background:#000;color:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
you can use
$(".read").click(function(e){
//e.preventDefault();
$(".read").next(".expand").toggle();
return false;
});
Please check the following code:
$(".read").click(function(e){
//e.preventDefault();
$(this).next('.expand').toggle();
return false;
});
.expand{display:none;background:#000;color:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
Try something like this. Here next() simply grabs the next element and $(this) referrs to the one currently clicked on.
$(".read").click(function(e){
//e.preventDefault();
$(this).next().toggleClass('expand');
return false;
});
.expand{display:none;background:#000;color:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>