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?
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
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'm looking for a way to transform HTML into a data object of text and arrays according to the heading hierarchy, something like this:
<h1>Title 1</h1>
<p>Lorem Ipsum 1</p>
<p>Lorem Ipsum 2</p>
<h2>Title 1.1</h2>
<p>Lorem Ipsum 3</p>
<p>Lorem Ipsum 4</p>
<p>Lorem Ipsum 5</p>
<h3>Title 1.1.1</h3>
<p>Lorem Ipsum 6</p>
<p>Lorem Ipsum 7</p>
<h2>Title 1.2</h2>
<p>Lorem Ipsum 8</p>
To translate into something like this:
{
"Title 1": [
"Lorem Ipsum 1",
"Lorem Ipsum 2", {
"Title 1.1": [
"Lorem Ipsum 3",
"Lorem Ipsum 4",
"Lorem Ipsum 5",
{
"Title 1.1.1": [
"Lorem Ipsum 6",
"Lorem Ipsum 7"
]
}
]
},
{
"Title 1.2": [
"Lorem Ipsum 8"
]
}
]
}
Any ideas on a library or methods I can look into to do this efficiently?
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.
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/