I have this code, but I do not know how to hide the video when clicking outside.
Here is my code:
$(".popup").click(function () {
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
I tried everything but clearly I am doing something wrong.
Thank you in advance.
This example shows the video when clicking on the image and hides when you click anywhere else:
$(".popup").click(function (e) {
e.stopPropagation();
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
});
$(document).click(function() {
$("#video-view").empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
The trick is to add a hidden layer on all the screen. When the user clicks on that layer, you will hide the movie.
keep attention to the z-index, it's important.
Like this:
$(".popup").click(function () {
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
$('.overlay').show();
});
$('.overlay').click(function(){
$(this).hide();
$('#video-view').html('');
});
#video-view {
z-index: 2;
position:relative;
display: inline-block;
}
.overlay {
position: absolute;
z-index:1;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
<div class="overlay"></div>
Related
I am working in Squarespace and quite new to Javascript and HTML.
In the screenshot below you could see that I am trying to create an effect that when you hover on one of the titles on the left, the image on the right in summary block changes. Since I am learning as I go I have created a code block for the titles and included a javascript in there as well. I assigned a id number to each title corresponding to the photo. However I just can not figure out how to make it work. All the info came from expecting other websites and seeing what code they are using. Could someone help me where I am going wrong - probably all sorts of things :-(
enter image description here
<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<script>
$( window ).ready(function() {
var screenRes = $(window).width();
$(window).resize(function () {
screenRes = $(window).width();
});
setTimeout(function(){
if (screenRes >= 768) {
jQuery('.summary-item-list .summary-item').each(function(){
var ids = jQuery(this).attr('id');
console.log(ids);
$(this).find('.summary-title').attr('data-id', ids);
var link = $(this).find('.summary-title-link').attr('href');
if (typeof link !== 'undefined') {
$(this).find('.summary-title a').wrapInner('<span></span>');
}
else {
$(this).find('.summary-title').wrapInner('<span></span>');
}
$(this).find('.summary-title').appendTo('.gallery-titles');
});
jQuery('.gallery-titles .summary-title:first-of-type').addClass('active');
var dataid = $('.gallery-titles .summary-title:first-of-type').data('id');
var link = $('#' + dataid + ' .summary-title-link').attr('href');
$('#' + dataid).addClass('active');
jQuery('.gallery-titles .summary-title').on("mouseover", (function(){
jQuery('.gallery-titles .summary-title').removeClass("active");
jQuery('.summary-item').removeClass("active");
$(this).addClass('active');
var dataid = $(this).data('id');
console.log(dataid);
$('#' + dataid).addClass('active');
}))
}
}, 200);
if (screenRes < 768) {
$('.summary-item-list').slick({
slide: '.summary-item',
infinite: true,
centerMode: false,
slidesToShow: 1,
autoplay: false,
dots: false,
fade: true,
cssEase: 'linear',
lazyLoad: 'ondemand',
});
}
});
</script>
<div class="gallery-titles">
<div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11534">
<a href="/blog/tempus-blandit" class="summary-title-link">
<span>Tempus blandit</span>
</a>
</div>
<div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11536">
<a href="/blog/Tempus-porttitor" class="summary-title-link">
<span>Tempus porttitor</span>
</a>
</div>
<div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11538">
<a href="/blog/Curabitur-blandit" class="summary-title-link">
<span>Curabitur blandit</span>
</a>
</div>
<div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11540">
<a href="/blog/Curabitur-blandit-tempus-porttitor" class="summary-title-link">
<span>Curabitur blandit tempus porttitor</span>
</a>
</div>
</div>
Here is a nice pure CSS solution:
p {
font-family: sans-serif;
}
p:hover {
color:red;
}
#image {
position: absolute;
right:1vw;
top:0;
width: 70vw;
height:40vh;
}
#a:hover ~ #image {
background: url("x") red;
}
#b:hover ~ #image {
background: url("y") green;
}
#c:hover ~ #image {
background: url("z") blue;
}
<p id="a">Image Description 1</p>
<p id="b">Image Description 2</p>
<p id="c">Image Description 3</p>
<img id="image" />
Of course you should replace
background: url("y") green;
with
background: url("/path/to/image/");
$(document).on('click', '.tbtn', function(e) {
$('#loading-image').show();
if(error){
$('loading-image').hide();
else{
val = $('.barbtn input:checked').val();
draw_summary($.parseJSON(data['summary']),val);
draw_barchart($.parseJSON(data['barchart']),val);
draw_scatter($.parseJSON(data['table']),val);
$('#loading-image').show();
}
});
Here i have drawing charts using d3...charts are coming correctly but i need to set loading image when i onclick the button...this code is not working
how to set loading image when onclick the button?
You just need to set CSS for it. Otherwise you are following right path. Please check below snippet.
$(document).on('click', '.tbtn-hide', function(e) {
$('#loading-image').hide(); //hide loader
});
$(document).on('click', '.tbtn-show', function(e) {
$('#loading-image').show(); //show loader
});
#loading-image
{
background: white url("http://smallenvelop.com/demo/simple-pre-loader/images/loader-64x/Preloader_1.gif") no-repeat scroll center center;;
height: 80%;
left: 0;
position: fixed;
top: 10;
width: 100%;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="tbtn-hide">Hide</button>
<button class="tbtn-show">show</button>
<div id="loading-image" style="display:none">
</div>
$(document).on('click', '.tbtn', function(e) {
$('#loading-image').show();
$.ajax({
success:function(result){
val = $('.barbtn input:checked').val();
draw_summary($.parseJSON(data['summary']),val);
draw_barchart($.parseJSON(data['barchart']),val);
draw_scatter($.parseJSON(data['table']),val);
$('#loading-image').hide();
}
});
});
I am making a one page website and in the middle of the site i have a few images that i want to appear when the user is scrolling down. when the user is scrolling down, i want the image to fade in and stay at 100% opacity. Ive gone through loads of different scripts and none work. I have found a good code snipped but it still doesnt seem to be working. It just displays the image but with low opacity.
Here is the code:
<script>
var $win = $(window);
var $img = $('.fadeInScroll'); // Change this to affect your desired element.
$win.on('scroll', function() {
var scrollTop = $win.scrollTop();
$img.each(function() {
var $self = $(this);
var prev = $self.offset();
if (prev) {
var pt = 0;
pt = prev.top - $win.height();
$self.css({
opacity: (scrollTop - pt) / ($self.offset().top - pt)
});
} else {
$self.css({
opacity: 1
});
}
});
}).scroll();
</script>
<section id="about">
<h2><center>Header</center></h2>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;"> <img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555"></div>
</section>
Ok. So if I correctly understand what you want, you can block your fade effect when your images are already fade in this way :
var $win = $(window);
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
$('img.hidden').each(function () {
var $self = $(this);
var prev=$self.offset();
if(prev){
var pt=prev.top-$win.height();
var opacity = (scrollTop-pt) / ($self.offset().top-pt);
$self.css({
opacity: opacity
});
if(opacity >= 1) $self.removeClass('hidden');
}
else{
$self.css({
opacity: 1
});
}
});
}).scroll();
.wrapper {
background: orange;
height: 2000px;
}
.wrapper img {
width: 300px;
position: absolute;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<img class="hidden" style="top: 400px;" src="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"/>
<img class="hidden" style="top: 1000px;" src="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"/>
<img class="hidden" style="top: 1600px;" src="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg">
</div>
Try changing the part where you have the inline style of style="opacity: 0.1; . Usually inline styles override the CSS you might have in the style tag. Look at this example I set the inline style to blue but the set it in the css to red the blue wins. maybe that is what is cause your opacity to stay the same.
#element{
color:red;
}
<div id="element" style = "color:blue;">element</div>
That's one reason why it's better to add and remove classes for you styles
I see that your overriding the inline styles with other inline styles so the above may not have caused you problems anyways Here is your snippet working. I don't know exactly what you want. It fades in
$(function(){
var $win = $(window);
var $img = $('.fadeInScroll'); // Change this to affect your desired element.
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
$img.each(function () {
var $self = $(this);
var prev=$self.offset();
if(prev){
var pt=0;
pt=prev.top-$win.height();
$self.css({
opacity: (scrollTop-pt)/ ($self.offset().top-pt)
});
}
else{
$self.css({
opacity: 1
});
}
});
}).scroll();
})
.top{
height: 100vh;
background: rgba(120, 30, 200, 0.3);
}
.fadeInScroll{
width: 300px;
height: 500px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="top"></div>
<section id="about">
<h2><center>Header</center></h2>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;">
<img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555">
</div>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;">
<img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555">
</div>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;">
<img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555">
</div>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;">
<img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555">
</div>
</section>
i have 2 css classes , left side and right side of screen and i need to put them togheter, in these classes i have images which look like a puzzle:
By dragging image from the right side to the left side.At drop,must fit with the image from left side. I read about drag and drop but didnt find something like that :(
What i've tried?
EDIT: http://postimg.org/image/je31ptb6d/ (this is an example with my pictures.On top are images separated as classes - class="left" for ca and class="right" for nă.On bottom are images after i drop the image from right to one from left.My question is how to specify the correct drop zone to make images look like bottom one from link after i drop image from right side? )
JS/Jquery:
// shuffle function for right side only
$(document).ready(function() {
var a = $(".right > img").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
var j = Math.floor(Math.random() * (i + 1));
var bi = a[i];
var bj = a[j];
a[i] = bj;
a[j] = bi;
}
$(".right").append(a);
});
// drag and drop
$(function() {
$( ".right img" ).draggable
({
cursor: 'move',
revert: 'invalid',
});
$( ".left img" ).droppable({
tolerance: 'fit',
});
});
HTML:
<div class="left">
<img class="piese" id="piesa1" src="images/Text_1.svg" />
<img class="piese" id="piesa2" src="images/Text_2.svg" />
<img class="piese" id="piesa3" src="images/Text_3.svg" />
<img class="piese" id="piesa4" src="images/Text_4.svg" />
</div>
<div class="right">
<img class="piese" id="piesa5" src="images/Text_5.svg" />
<img class="piese" id="piesa6" src="images/Text_6.svg" />
<img class="piese" id="piesa7" src="images/Text_7.svg" />
<img class="piese" id="piesa8" src="images/Text_8.svg" />
</div>
To solve your problem you must build a grid
and use drag drop by taking as a reference the location of the squares of the grid.
This is a simple example to give you an idea.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#grid{
background-color: #09F;
height: 130px;
width: 390px;
position:relative;
margin:100px auto;
}
.square{
height: 128px;
width: 128px;
border:1px solid #999;
float:left;
}
#first-image{
position: absolute;
left: 0px;
}
#second-image{
position: absolute;
right: 0px;
}
</style>
</head>
<body>
<!--take two images by 120px with this class and id -->
<div id="grid">
<img class="dr" id="first-image" src="your-image.png" width="128" height="128">
<img class="dr" id="second-image" src="your-image.png" width="128" height="128">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
for(xx = 0; xx < 3; xx++) {
$("#grid").append($('<div class="square"></div>'));
};
$('.dr').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('div.square').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
de=$('#'+data).detach();
var x = $(this).position().left;
var y = $(this).position().top;
de.css({'position':'absolute','top':y+'px','left':x+'px'}).appendTo($(this));
};
});
});
</script>
</body>
</html>
I'm trying to do function to sliding new added content, using jQuery slide effect but I can't apply any solutions to put two divs in a single line. How to fix code below to slide from left to the right side by side? Maybe this code is completely to rebuild?
jsFiddle:
jsfiddle
JS:
$(function() {
$("#hello").html("Hello");
$('#edit').toggle(function() {
var newhtml = '<input type="text" id="hello_input" value="" />';
slideNewContent(newhtml);
}, function() {
var newhtml = $("#hello_input").val();
slideNewContent(newhtml);
});
});
function slideNewContent(c) {
$("#slideOut").empty();
$("#slideIn").children().clone().appendTo("#slideOut");
$("#slideIn").find("#hello").html(c);
var slideOut = $("#slideOut");
var slideIn = $("#slideIn");
slideOutIn(slideOut, slideIn);
}
function slideOutIn(outElement, inElement) {
var hideoptions = { "direction": "right", "mode": "hide" };
var showoptions = { "direction": "left", "mode": "show" };
$(outElement).effect("slide", hideoptions, 1000);
$(inElement).effect("slide", showoptions, 1000);
}
HTML:
<div class="span3">
<div id="slider">
<div id="slideIn" class="content">
<span>
<span id="hello"></span>
<button class="btn btn-mini" id="edit">Edit</button>
</span>
</div>
<div id="slideOut" class="content"></div>
</div>
</div>
CSS:
#slider {
/*float:left;*/
display: inline-block;
}
#slideIn {
width: 270px;
/*display: inline;*/
}
#slideOut {
width: 270px;
/*display: inline;*/
}
#hello_input {
width:160px;
}
Edit to this
$(outElement).effect("slide", hideoptions, 0);
$(inElement).effect("slide", showoptions, 0);