change attr element by javascript

change attr element by javascript - javascript

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

Related

Multiple child component with single root element in vue

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>

Angular transclude/replace equivalent in UI-Router

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?

Length of page is disturbed while hovering on images

I am facing a problem on my webpage, when I hover on the images the popups are shown in a good way, but the length of the page is disturbed it means the page length gets bubbled. I am using javascript for this task. Below is the codes; your suggestions would be appreciated:
<script>
function showfunction(id) {
//alert(id);
//document.getElementById(id).style.display="block";
$("#" + id).css('display', 'block');
}
function hidefunction(id) {
//alert(id);
//document.getElementById(id).style.display="none";
$("#" + id).css('display', 'none');
//alert(a);
}
</script>
Here is the html code and the images are display inline:
<body>
<ul style="list-style-type:none; width:647px; margin-top:-37px;">
<li class="new_hire_list">
<img class="grayscale" onmouseover="showfunction('div1')" onmouseout="hidefunction('div1')" src="images/pro_management.jpg" />
</li>
<li class="new_hire_list">
<img class="grayscale" onmouseover="showfunction('div2')" onmouseout="hidefunction('div2')" src="images/commun.jpg" />
</li>
</ul>
</body>
Here are the divs which gets displayed on hover of the images:
<div id="div1" onmouseover="showfunction('div1')" onmouseout="hidefunction('div1')" class="content" style="">
<span style="font-size:11px; color:#000000;">
barun LoremIpsum dolor sit amet
LoremIpsum dolor sit ametLoremIpsum dolor sit ametLoremIpsum dolor sit
ametLoremIpsum dolor sit ametLoremIpsum dolor sit ametLoremIpsum dolor sit
ametLoremIpsum dolor sit ametLoremIpsum dolor sit ametLoremIpsum dolor
sit
</span>
<br/>
<img src="images/More_details.jpg" />
</div>
<div id="div2" onmouseover="showfunction('div2')" onmouseout="hidefunction('div2')" class="content">
<span style="font-size:11px; color:#000000;">
LoremIpsum dolor sit amet LoremIpsum dolor sit
ametLoremIpsum dolor sit ametLoremIpsum dolor sit ametLoremIpsum dolor sit
ametLoremIpsum dolor sit ametLoremIpsum dolor sit ametLoremIpsum dolor sit
ametLoremIpsum dolor sit ametLoremIpsum dolor sit
</span>
<br/>
<img src="images/More_details.jpg" />
</div>

The divs are part of the page length. If you show/hide them, the browser resizes the page.
What you need is some static whitespace (an empty vertical box), big enough for the divs to appear in.
A simple solution would be to wrap the info divs in a <div style="height: 200px;">...</div>.
This wouldn't change and the page wouldn't jump.

transform scale content and save width container

I try to produce the same effect of the browser zoom to a div in my page,
This div contains several thumbnails with a float left on each thumbnail,
My zoom works very well on chrome and opera exactly as I want, but on firefox and IE : if zoom out it makes white space and if zoom in it creates scrolls.
Can anyone help me please.
$('#zoom-in').click(function() {
updateZoom(0.1);
});
$('#zoom-out').click(function() {
updateZoom(-0.1);
});
zoomLevel = 1;
var updateZoom = function(zoom) {
zoomLevel += zoom;
$('.zoom').css({ zoom: zoomLevel, '-moz-transform': 'scale(' + zoomLevel + ')','-ms-transform': 'scale(' + zoomLevel + ')', 'transform-origin': 'top left' });
}
.panel{
float:left;
margin-right:20px;
width:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-primary" id="zoom-in">zoom in</button>
<button type="button" class="btn btn-primary" id="zoom-out">zoom out</button>
</div>
</div>
<hr>
<div class="row zoom" style="margin-top:20px;">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
</div>
</div>

Multiple hero-units to be the same height

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/

Develop Reference

JavaScript is the programming language of the Web.

change attr element by javascript - javascript

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

Related

Multiple child component with single root element in vue

Angular transclude/replace equivalent in UI-Router

Length of page is disturbed while hovering on images

transform scale content and save width container

Multiple hero-units to be the same height

Categories

Resources