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.
Related
I am trying to make it so text fades in when I click a button. Any help is massively appreciated!
$(".btnClick").click(function(event) {
var x = $(this).text();
if (x == "PowerApps") {
$(this).parent(".show-details").find('.show-me').fadeIn(500);
} else {
$(this).text("PowerApps");
$(this).parent(".show-details").find('.show-me').fadeOut(500);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="show-details">
<button class="btn btn-dark btnClick">PowerApps</button>
<div class="show-me">
<h4>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h4>
</div>
<button class="btn btn-dark btnClick">Operational Efficiency</button>
<button class="btn btn-dark btnClick">Together</button>
</div>
Use fadeToggle(), may be can solve your problem.
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
Example single service 1st tag redirects to #xx and 2nd one redirects to #yy both on another subpage of my website.
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-service lk1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-service lk2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
</div>
const $offert = ["xx", "yy"];
const $clicken = $('.single-service');
$($clicken).click(function(){
window.location='oferta/index.html';
})});
These things are meant to work without script engine assistance
Please use the conventional HTML Anchors, such as <A ID="sectionID" and utilize fractal URL's on a link such as <A HREF="oferta/index.html#sectionID".. to make a Hyper-Jump.
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-service lk1" data-anchor="xx">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-service lk2" data-anchor="yy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
</div>
const $clicken = $('.single-service');
$($clicken).click(function(){
window.location='oferta/index.html#'+$(this).data('anchor');
})});
just add # and id of a div you want to go to ie.
window.location='oferta/index.html#id';
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 cannot make the selected div appear and disappear on button press.
<button id="showButton" type="button">Show More</button>
<div id="container">
<div id="fourthArticle">
<img class="row1pic" id="pic4" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
<p>
<span style="font-weight:bold;">This is a third article</span>
this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
</p>
</div>
<div id="fifthArticle">
<img class="row1pic" id="pic5" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
<p>
<span style="font-weight:bold;">This is a third article</span>
this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
</p>
</div>
<div id="sixthArticle">
<img class="row1pic" id="pic6" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
<p>
<span style="font-weight:bold;">This is a third article</span>
this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
</p>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$('#showButton').click(function () {
$('#container').toggleClass('hidden');
}
</script>
when I press the button, nothing happens. I tried putting an alert in the .click function, and that failed too. So I assume something is wrong with that, but from what I know, I have no idea what I could be doing wrong.
Your container div was not closed properly with a closing tag </div>.
Your event handler was not closed properly.
$(function() {
$('#showButton').click(function() {
$('#container').toggleClass("hidden");
});
});
.hidden{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showButton" type="button">Show More</button>
<div id="container">
<div id="fourthArticle">
<img class="row1pic" id="pic4" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
<p>
<span style="font-weight:bold;">This is a third article</span>
this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
</p>
</div>
<div id="fifthArticle">
<img class="row1pic" id="pic5" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
<p>
<span style="font-weight:bold;">This is a third article</span> this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
</p>
</div>
<div id="sixthArticle">
<img class="row1pic" id="pic6" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
<p>
<span style="font-weight:bold;">This is a third article</span> this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
</p>
</div>
</div>
Try using valid Jquery: https://jsfiddle.net/bv5fLrth/18/
You were missing this: );
From the end of this:
$('#showButton').click(function () {
$('#container').toggleClass('hidden');
});
Depends on your CSS for the class hidden? Have you tried adding display none CSS to container like so...
#container {
display: none;
}
Then in your script use slideToggle like so but make sure your document ready function is there and the jquery syntax is correct...
$(function() {
$('#showButton').click(function() {
$('#container').slideToggle('fast');
});
});
This solution is using jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$('#btn').click(function () {
$('#main').toggleClass('hidden');
});
<button id="btn">Change Mode</button>
<div id="main">
<div>
div One
</div>
<div>
div two
</div>
<div>
div three
</div>
</div>