Hey i want want the iframe to only load when the mosue is hovering on it.
I only want it to laod when the mouse is over because i have many of them and the loading speed of the site is very bad.
Any ideas?
i already tried if with a hidden div around it but i dont like that option
$(".text").mouseover(function() {
$(this).children(".test").show();
}).mouseout(function() {
$(this).children(".test").hide();
});
.text {
color: #069;
cursor: pointer;
text-decoration: none;
}
.test {
display: none;
position: absolute;
border: 1px solid #000;
width: 400px;
height: 400px;
}
<span style="font-size:120%;"><b><a class="text"> 👁
<iframe class="test" src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></iframe>
</a></b></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Don't set the src of the iframe. Only set it when the user hovers for the first time.
In the below snippet you can see the page inside of iframe is not loaded initially until you hover over the eye.
I have intentionally commented display: none; so that you can observe that page is not loaded.
$(".text").mouseover(function() {
var src = $(this).children(".test").attr('src');
if(!src){
src = $(this).children(".test").attr('data-src');
$(this).children(".test").attr('src', src);
}
$(this).children(".test").show();
}).mouseout(function() {
$(this).children(".test").hide();
});
.text {
color: #069;
cursor: pointer;
text-decoration: none;
}
.test {
//display: none;
position: absolute;
border: 1px solid #000;
width: 400px;
height: 400px;
}
<span style="font-size:120%;"><b><a class="text"> 👁
<iframe class="test" data-src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></iframe>
</a></b></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
I want to show a tooltip with the message "Copied!" when the button is clicked and make it disappear after a few seconds. Most of the answers I saw was using jQuery, is there a way to make it on Vue.js without too much resources?
My button is made and already have a function that onClick copy a code and I can use this function to show the tooltip as well.
I was thinking in something like this:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Basic Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>
</body>
</html>
copyClick(code) {
const payload = {
document: --- ,
id: ---,
status: ---,
}
Service.saveEvent ({payload});
ClipboardService.copy(code)
}
You can try like in following snippet:
new Vue({
el: '#demo',
data() {
return {
tool: false,
text: "Copied!"
}
},
methods: {
showTool() {
this.tool = true
setTimeout(() => this.tool = false, 3000)
},
copyClick() {
this.showTool()
// your code
}
}
})
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -.5rem;
right: -8rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" style="text-align:center;">
<button #click="copyClick">Copy</button>
<h2>Basic Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div #mouseover="showTool" class="tooltip">Hover over me
<span v-show="tool" class="tooltiptext">{{ text }}</span>
</div>
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>
</div>
I am trying to hide #showMyList, #showMyName these divs. On click button need to show divs.
Both div has separate buttons. I want to see one div at a time. I can give different css (style)to them so that they will look different.
Which one will be more useful jQuery hide() and show()
Or display none and block?
#showMyList, #showMyName{
height: 100px;
width: 500px;
text-align: center;
border: 1px solid gray;
background-color: antiquewhite;
position: absolute;
top: 200px;
left:200px;
}
</style>
<script>
$('document').ready(function(){
$('showMyList').css("display", "none");
$('showMyAcc').css("display","none");
$("myList").click(function(){
$("showMyList").css("display", "block");
$("myAcc").click(function(){
$("showMyAcc").css("display", "block");
});
});
});
Consider the following example.
$(function() {
$('#showMyList, #showMyAcc').hide();
$("#myList").click(function() {
$("#showMyAcc").hide();
$("#showMyList").show();
});
$("#myAcc").click(function() {
$("#showMyList").hide();
$("#showMyAcc").show();
});
});
#showMyList,
#showMyAcc {
height: 100px;
width: 500px;
text-align: center;
border: 1px solid gray;
background-color: antiquewhite;
position: absolute;
top: 200px;
left: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myList">Show List</button>
<button id="myAcc">Show Name</button>
<div id="showMyList">List</div>
<div id="showMyAcc">Name</div>
You can Hide both elements and then reveal or show 1 at a time.
I am going to add dynamically elements to my block of ul.
I would like to center all list's elements to parent div(brown boder).
For example,
if the resolution of the browser allows you to set two blocks in one row, I would like to center this row in relation to parent div.
I would be very graftefully.
Link to demo
myCode:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var tab = [2,3,4,5,7,8,9,11,12,13,14,15];
$(document).ready(function(){
$('#godziny').on('click', '.godzina', function(){
//alert(this.attr('class'));
$('.yb').removeClass('yb');
$(this).addClass('yb');
});
$('#getElements').click(function() {
for(i = 0; i < tab.length; ++i) {
alert(tab[i]);
setTimeout(function(i){
$('#godziny').append('<li class="godzina">' + tab[i] + '</li>');
}, i*50);
}
});
});
</script>
<style>
#spisSalonow {
margin: 0 auto;
}
#spisSalonow > div {
padding-top: 15px;
color:red;
}
#wybor_terminu {
border: 1px solid brown;
}
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
border: 1px solid red;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
float: left;
cursor: pointer;
margin-right: 40px;
margin-top: 40px;
/*margin:auto;*/
/*
opacity: 0.4;
filter: alpha(opacity=40);
*/
}
.yb {
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="get Elements" id="getElements"/>
<section id="content">
<div class="full">
<BR/>
<div id="wybor_terminu" class="center border" style="width: 70%; position: relative;">
<div style="text-align: center"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-05-24.png" alt="Left Arrow" /> <span id="day"> ANY DAY </span> <img src="http://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-06-24.png" alt="Right Arrow" /></div>
<ul id="godziny" style="margin-top: 25px;">
</ul>
</div>
</section>
</div>
</body>
</html>
You can use the CSS flexbox to achieve this. Here is a link to a complete guide on how to use flexbox. I hope this helps.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add this lines:
CSS
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
/*NEW*/
padding: 0;
width: 100%;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
/*float: left; You don't need this line*/
cursor: pointer;
/*NEW*/
margin:auto;
margin-top: 40px;
}
EDIT
This is only a quick solution with bootstrap maybe it could help you a little bit. jsfiddle
jQuery
In this line I added bootstrap classes:
$('#godziny').append('<li class="godzina col-sm-12 col-md-6">' + tab[i] + '</li>');
This code center your boxes (is not the best solution, but it works):
countBoxes = $('#godziny').width() / 200;
alignBoxes = ($('#godziny').width()-(200*parseInt(countBoxes)))/2;
if(countBoxes >= 2.65){
$('#godziny').css('margin-left', alignBoxes);
} else{
$('#godziny').css('margin-left', 0);
}
If you change the resolution of your screen, click the button to center your boxes again.
I have this application that shows small windows after clicking a button
JsFiddle
$('.modules').draggable();
$('.glyphicon').click(function() {
$(this).next('.modules').slideToggle();
});
.glyphicon {
font-size: 2em;
color: #A70000;
position:absolute;
z-index: 10;
display: block;
}
.glyphicon:hover {
cursor: pointer;
color: #000;
}
.modules{
position: absolute;
width: 30%;
box-shadow: 5px 5px 15px #000;
z-index: 5;
display: none;
overflow: hidden;
}
.modules_box {
color: white;
background-color: rgba(159,159,159,0.8)
}
.module img{
padding: 5px;
}
#module1 {
left: 10%;
top: 7%;
}
#button_module1 {
left: 10%;
top: 7%;
}
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="button_module1" class="glyphicon glyphicon-info-sign"></span>
<div class="modules" id="module1" draggable="true">
<img src="http://www.touronline.ag/Portals/0/Products/alle_module.jpg" alt=""/>
<div class="modules_box">
<h5>DANE:</h5>
<ul>
<li>Parametr 1: 500</li>
<li>Parametr 2: 700</li>
<li>Parametr 3: 1500 cm</li>
</ul>
</div>
</div>
Windows are draggable so a user can move them around. What I want to achieve is to reset the window position after it's hidden so it always shows at its origin. I would like the universal solution that doesn't require writing separate code for every window. There will be many windows placed at different spots using absolute position. Any suggestions how this could be achieved?
Resetting the 'style' attribute on toggle will ensure the module always reverts to it's original position in the stylesheet.
if(!$this.is(":visible")){
$this.attr('style','');
}
http://jsfiddle.net/vrww6fcm/3/
I would like to type text in a contenteditable div that is placed right to an image.
HTML
<div class="container">
<div class="image">
<img src="/path/*.jpg" alt="" />
</div>
<div class="text" contenteditable>
<p></p>
</div>
<div class="clear"></div>
CSS
.container {
width: 1000px;
border: 1px solid #000;
}
.image, .text {
position: relative;
}
.image {
width: 500px;
height: 500px;
overflow: hidden;
float: left;
}
.text {
min-height: 30px;
border: 1px solid #000;
}
.clear{
clear: both;
}
My goal is to have the caret positioned to the right of the image when I focus into the contenteditable and not to the beginning of the p tag as you can see in this Fiddle.
One solution was to insert a in the <p>, as showed in this other Fiddle, but this is not a very clean solution: it pollutes the text that is written inside.
I can take advantage of JavaScript and jQuery, but a pure HTML and CSS solution is preferred
Any thought?
UPDATE
I forgot to say that the text should go also under the image so it cannot be floated or hidden
Simply try margin-left:500px;
.text {
min-height: 30px;
border: 1px solid #000;
margin-left:500px;
}
You have to remove div's and apply to image these css-styles:
display: -moz-inline-stack;
display: inline-block;
_overflow: hidden;
*zoom: 1;
*display: inline;
with
vertical-align: bottom;
Add overflow:hidden into an element that should not overlay a floating element:
http://jsfiddle.net/nothrem/0mdcLzqs/3/
<div class="container">
<div class="image">
<img src="https://ununsplash.imgix.net/photo-1417021423914-070979c8eb34?fit=crop&fm=jpg&q=75&w=1050" alt="" />
</div>
<div class="text" contenteditable style="overflow:hidden">
<p></p>
</div>
<div class="clear"></div>
</div>
UPDATE: you can use Javascript to change the overflow based on element's content
document.getElementsByClassName('text')[0].onblur = function() {
if (this.innerHTML.replace(/<[^>]+>/, '')) { //remove HTML tags
this.style.overflow = 'visible';
} else {
this.style.overflow = 'hidden';
}
}
Blur fires after you finish editing, you may want to add another events, e.g. onkeyup, onmouseclick, etc.
I am not a big fan of floats unless necessary, I'd remove the float: left from the image CSS and add to the .image, .text one these two lines:
display: inline-block;
vertical-align: top;
To get text under your image
Set the container width to the width of your image, and set the position of your text with float left or right like this:
.container {
width: 500px; // width of image
border: 1px solid #000;
}
.image, .text {
position: relative;
}
.image {
width: 500px;
height: 500px;
overflow: hidden;
float: left;
}
.text {
min-height: 30px;
width:100%;
border-top: 1px solid #000;
float:left;
text-align:center;
}
.clear{
clear: both;
}
Here is a demo