I am completely new to javascript and using colorbox. I can get the video to load and close as I would like. However, I don't know how to change the formating of the box or how to make the background more opaque while the pop-up apears. I have the following code:
{js}
<br>
<br>
<h1>hello world! This is soooooo exciting! </h1>
<p><a href="javascript:void jQuery.colorbox({
html:'<iframe width=600 height=400 src=http://www.youtube.com/embed/eh-0knDpn5g frameborder=10 allowfullscreen></iframe>'
})"> <img src="/uploads/features/featured-block-1.jpg" /></a></p>
Also I have been having this weird problem where I close the pop-up, but the background still stays opaque.
If anyone could post some code examples or explain to me how/if the colorbox takes parameters, I would greatly appreciate it.
All options you can find on this page: ColorBox
Here is example:
$.colorbox({ href: 'http://www.youtube.com/embed/eh-0knDpn5g', width: '600px', height: '400px', iframe: true });
<a class='youtube' href='http://www.youtube.com/watch?v=VOJyrQa_WR4'>Business Cats</a>
<script>
$('.youtube').colorbox({iframe: true, width: 640, height: 390, href:function(){
var videoId = new RegExp('[\\?&]v=([^&#]*)').exec(this.href);
if (videoId && videoId[1]) {
return 'http://youtube.com/embed/'+videoId[1]+'?rel=0&wmode=transparent';
}
}});
</script>
Related
story: hide the iframe if the .php is deleted or similar. So i try to hide the div that contains the iframe. Website of customer A can iframe a video from my website (external-website). But if the video is deleted, it should hide the complete iframe (the div). The complete php will be deleted or renamed if the video is not available.
Hide the <div> if external file (i want to iframe)
is not available or named as .php?=123456 or has not a <div "id", whatever.
The inline style never changes.
I tried each of this above, i don`t get it working.
I can edit the external .php file (my website too).
I do not get the script to change the inline style whatever i try.
What i want to do, hide the div if "something".
<div id="hide-me">
<iframe src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
function yourFunctionName () {
var anyname = document.getElementById("hide-me").style.display;
if(document.getElementById("id-in-external-php").src == 'https://www.external-website.com/subfolder/1250.php'){
document.getElementById("hide-me").style.display="block";
} else {
document.getElementById("hide-me").style.display="none";
}
}
</script>
I asked a similar question here, but it did not give a solution
enter link description here
content of https://www.external-website.com/subfolder/1250.php :
<div id="id-in-external-php">this is content for the iframe</div>
This is how I ran your code again and it worked, so you can try it:
<div id="hide-me" style="display: none;">
<iframe style="display: none;" id="id-in-external-php" src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
const yourFunctionName = () => {
const anyname = document.getElementById("hide-me");
const frameId = document.getElementById("id-in-external-php");
const check = frameId.contentDocument.body.children
const c = check[0].innerText;
if(c.startsWith('Cannot')) {
anyname.style.display="none";
frameId.style.display="none";
} else {
anyname.style.display="block";
frameId.style.display="block";
}
}
window.addEventListener("load", yourFunctionName, false);
</script>
I did not see where you invoked the function, so i invoked mine when window load
I have a youtube video that I want shown but it doesn't show at all. I didn't add a height or width to video because I want to keep it responsive.
http://www.owlcarousel.owlgraphic.com/demos/video.html
<div id="carousel" class="owl-carousel">
<div>
<a class="owl-video" href="https://www.youtube.com/watch?v=Oy9GFAQ4x4w"></a>
</div>
<div><img src="http://cdn.playbuzz.com/cdn/7a7a5814-ed79-410c-b748-db6a24f73f0b/4d71c010-f930-4334-ba62-79d87a7ddef4.jpg"></div>
</div>
http://jsfiddle.net/nLz17fcv/12/
Adding a video using a tag Seems not working.
<div>
<a class="owl-video" href="https://www.youtube.com/watch?v=Oy9GFAQ4x4w"></a>
</div>
Instead it you can replace it by Iframe to embed the video you want like this.
<div class="item-video">
<iframe width="420" height="315" src="https://www.youtube.com/embed/Oy9GFAQ4x4w">
</iframe>
</div>
In addition to, I've removed transitionStyle: "fade" because this property blocks the carrousel transition.
You can check it on this DEMO
Hope It Helps
In my case the error were with the URL that was being generated while creating iframe, I placed "https://" in front of Youtube iframe and changed few things as (Added "https:")
<pre>
if (video.type === 'youtube') {
html.attr( 'src', 'https://www.youtube.com/embed/' + video.id );
}
else if (video.type === 'vimeo') {
html.attr( 'src', 'https://player.vimeo.com/video/' + video.id );
}
</pre>
One more thing I did for vimeo video was added "https:"
<pre>
url: 'https://vimeo.com/api/v2/video/' + video.id + '.json',
</pre>
I would like, when the user click on image in the open popup, the content will changed with url in iframe (not close/open, but crossfade)
I have a gallery with hs.transitions = ['expand', 'crossfade'].
Next construction will close old popup window and open new one (and break the slideshow), but i want the same effect (crossfade), like a user click next image.
hs.allowMultipleInstances = false;
hs.Expander.prototype.onImageClick = function()
{
return hs.htmlExpand(null, { objectType: 'iframe', src: 'url' });
};
How to make it?
Sample - http://jsfiddle.net/xCnfE/4/
You can’t crossfade from an image to a HTML popup if the HTML popup isn’t part of the gallery. Instead you can create a regular iframe that covers the image with jQuery and show this iframe only when clicking the image (onImageClick). Please see http://jsfiddle.net/roadrash/B7sDG/
hs.Expander.prototype.onImageClick = function (sender) {
$('<iframe src="'+this.custom.url+'" frameborder="0"></iframe>').css({
position: 'absolute',
top: '0',
height: '100%',
width: '100%',
background: '#fff',
zIndex: 20
}).appendTo(sender.wrapper);
return false;
};
The url is passed to the iframe src using hs.custom in the onclick:
<a href="large-image.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions, {url: 'http://highslide.com/'})">
<img src="thumbnail.jpg" alt="Caption Text" />
</a>
Here's a fiddle:
http://jsfiddle.net/vBt5E/
I want to pause and unpause an endlessly scrolling jquery animation on hover, without any weird jumps.
html like this:
<div id="vertical-carousel">
<div class="imagecolumn">
<img src="http://placekitten.com/200/120" width="200" height="120">
<img src="http://placekitten.com/200/100" width="200" height="100">
<img src="http://placekitten.com/200/80" width="200" height="90">
</div>
</div>
javascript like so:
var imageColumn = $('.imagecolumn');
origColumnHeight = imageColumn.height();
$(document).ready(function() {
var columnDupe = imageColumn.contents()
.clone()
.addClass('dupe')
.appendTo(imageColumn);
function scrollColumn() {
imageColumn.css({'top': '0'})
.animate({top: -origColumnHeight},15000, 'linear', scrollColumn);
}
scrollColumn();
});
I know this has been asked in different form before but the various answers aren't working for me. I looked at Tobia Conferto's "Pause" plugin and just couldn't get it to work. Ditto this one, which is supposedly even buggier.
Please post a working fiddle if you can, it really helps. Thanks!
Using the "Pause" plugin, you can get it working by doing the following:
$(".imagecolumn").hover(function() {
$(this).pause();
}, function() {
$(this).resume();
});
Example: http://jsfiddle.net/charlescarver/vBt5E/1/
Make sure you include the plugin on your page! https://raw.github.com/tobia/Pause/master/jquery.pause.min.js
P.S. I prefer PlaceDog.
EDIT: I found why it is doing this, but a question has now arisen from this.
Scroll down to where I said "edit" at the bottom to help me with the new issue that has come up.
The page can be seen here: http://www.remodeling-buffalo.com/bathroom/swanstone-bath-and-alcove-walls.php
If you scroll down to the bottom and click one of the tabs underneath the section "video" it jumps up the page. It only happens if you scroll down so the video is above the bottom of your browser.
Here is the page code that I have for the tabs:
<ul id="tabs" class="filter-nav option-set">
<li><a class="selected" href="#">Acetone Test</a></li>
<li>Impact Test</li>
<li>Heat Test</li>
</ul>
<div id="tab-items" class="margin_top_55 textcenter">
<hr class="dashed margin_bottom_15">
<section>
<div>
<p>
<video id="sublime" class="sublime center" poster="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-chemical-test.jpg" width="640" height="320" data-name="Swanstone - Chemical (Acetone) Test" data-uid="56410b5b" preload="auto">
<source src="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-chemical-test.mov" />
</video>
</p>
<h3>Acetone Test</h3>
<h5 class="grey">Impervious To Chemicals</h5>
</div>
</section>
<section>
<div>
<p>
<video id="sublime2" class="sublime center" poster="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-impact-test.jpg" width="640" height="320" data-name="Swanstone - Impact Test" data-uid="12be3c75" preload="auto">
<source src="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-impact-test.mov" />
</video>
</p>
<h3>Impact Test</h3>
<h5 class="grey">Impact Resistant!</h5>
</div>
</section>
<section>
<div>
<p>
<video id="sublime3" class="sublime center" poster="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-heat-test.jpg" width="640" height="320" data-name="Swanstone - Heat Test" data-uid="403140c8" preload="auto">
<source src="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-heat-test.mov" />
</video>
</p>
<h3>Heat Test</h3>
<h5 class="grey">Withstands Heat!</h5>
</div>
</section>
and here is the JS code that I have
$(function() {
$("#tabs").tabs("#tab-items section", { effect: 'fade', fadeOutSpeed: 0, fadeInSpeed: 400 });
$(".option-set").on("click", "a", function(e) {
$(this).addClass('selected') .parent().siblings().find("a").removeClass('selected'); });
});
It calls out to jquery.tools.min.js which is just the "tabs" of the jqueryUI. That file can be seen here: http://www.remodeling-buffalo.com/resource/js/jquery.tools.min.js
EDIT: Fixed Issue on my own, but have a question now for best method
It seems to be a problem with the div going hidden instantly, and the other fading in, so this code right here:
{ effect: 'fade', fadeOutSpeed: 0, fadeInSpeed: 400 });
So the issue is that even though it's impossible to see, both sections go invisible for like .0000 MS but it is forced to push the page up there is nothing there (if you know what I mean).
So I can fix this by changing the "fadeOutSpeed" from 0 to 1, and it no longer does this, although it does look a little goofy. Is there a better effect to use which would stop this from happening? It appears as if having a fade does this problem.
Thanks for the help guys! :)
That is your own code in custom.js:
$('.navbar a, .scroll a, .smoothscroll a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
Uncaught TypeError: Cannot read property 'top' of null (repeated 4 times)
}, 850,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
The buttons are $('.smoothscroll a'), so your scrollTop makes it scroll top!
Maybe this scrollfix can fix it?
$(".option-set").on("click", "a", function(e) {
var scrollTop = $(window).scrollTop();
$(this).addClass('selected').parent().siblings().find("a").removeClass('selected');
$(window).scrollTop(scrollTop);
});
I would suggest you just use divs or spans instead of a tags. Then just use css to style it to look like a link.
Example:
myclass {
cursor: pointer;
}