The page linked here contains a row of 3 images that display text on mouse-over. I want to stick to the way I did it with without specifying a value to href attribute because I don't want the tiles linked anywhere. I just want some text to show when cursor moves over the image. I'm looking for help to
To stop the image from sending the user to top of the page when the hover-over text is clicked. Or make the hover-over unclickable.
Changed pointer style to normal arrow style when mouse moves over the image.
Here is the code written for this particular section:
<!-- START SEAMLESS GIFTING FOR EVERY OCCASION -->
<?php if( have_rows('seamless_gifting') ): while( have_rows('seamless_gifting') ): the_row();
$title_text = get_sub_field('title_-_text');
?>
<div class="seamless-gifting front-page-row" id="row2">
<div class="wrap-x">
<div class="inside">
<div class="row seamless-gifting-title"><?php echo $title_text; ?></div>
<div class="row compact">
<?php if ( have_rows( 'occasion_column' ) ) : while ( have_rows( 'occasion_column' ) ) : the_row();
$image = get_sub_field( 'gift_-_image' );
$title_text = get_sub_field( 'title_-_text' );
$hover_text = get_sub_field( 'hover_-_text' );
?>
<div class="col col-xs-12 col-sm-6 col-lg-4">
<a href="#" class="block h-100 bg-white-base transition" target="" title="">
<div class="relative image">
<?php if($hover_text): ?>
<div class="textarea relative pt pb pl pr no-touch select-none">
<div class="bg-white-base pl pr">
<article class="center-xs"><?php echo $hover_text; ?></article>
</div>
</div>
<?php endif; ?>
<?php if($image): ?>
<div class="object-cover-wrap">
<picture>
<source media="(max-width: 360px)" srcset="<?php echo($image['sizes']['xsmall']); ?>">
<source media="(max-width: 640px)" srcset="<?php echo($image['sizes']['small']); ?>">
<source media="(max-width: 1024px)" srcset="<?php echo($image['sizes']['medium']); ?>">
<source srcset="<?php echo($image['sizes']['large']); ?>">
<img src="<?php echo($image['sizes']['large']); ?>" alt="<?php echo $image['alt']; ?>" />
</picture>
</div>
<?php endif; ?>
</div>
</a>
<div class="pt pb pl pr center-xs title transition">
<h3 class="mb0 h5 transition">
<?php echo $title_text; ?>
</h3>
</div>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php endwhile; endif; ?>
<!-- END SEAMLESS GIFTING FOR EVERY OCCASION -->
Below is the image of the section I'm talking about.
From this:
<a href="#" class="block h-100 bg-white-base transition" target="" title="">
Change to this (remove href="#" and add tabIndex="0"):
<a tabIndex="0" class="block h-100 bg-white-base transition">
What href="#" does is, it changes the URl by appending # at the end of the url and that causes the browser to react and in your case it forces a page scroll to the top.
After you remove href, the <a> element will now act like an ordinary inline element like span without keyboard tab capabilities. So you must proceed to add tabIndex="0" to make it tab-able in the case your viewer uses a keyboad.
I have a function where onclick, I want the iframe to append to another div within my website. So when the user clicks 'watch-youtube-video', this will then grab the iframe from 'youtube-video' and append just the src to the 'fixed-player' iframe src.
I have tried using the below jQuery but I am hitting an error. Could anyone please help?
HTML
<div class="fixed-player"><iframe src=""></div>
<div class="span-row wow scale-anm all animated">
<div class="portal-img ">
<div class="youtube-video">
<iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/10zsTgv8MxA?autoplay=1&mute=1&controls=0&showinfo=0&autohide=1&loop=1" allowautoplay="" allowfullscreen="" data-origwidth="100%" data-origheight="100%" style="width: 0px;">
</iframe>
</div>
</div>
<div class="portal-cont ">
<div class="top-cont ">
<div class="main-button grey-btn watch-youtube-video">
Watch Video
</div>
</div>
</div>
</div>
jQuery
$('.watch-youtube-video').on('click', function(){
$('.overlay').fadeIn();
$('.youtube-viewer-pop').fadeIn();
$(this).parent().parent().parent().find("iframe").attr("src").appendTo('fixed-player');
});
To set the src attribute of a jQuery object, you should be using the .attr() method instead, i.e.: .attr('src', <SOURCE>) instead:
const src = $(this).parent().parent().parent().find("iframe")[0].src;
$('.fixed-player').attr('src', src);
i used toggle to hide paragraph through a video but i do not run
<div class="site-slider">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="overlay"></div>
<video id="video_background" preload="auto" autoplay="true" loop="loop" volume="0" width="100%">
<source src="video.mp4" type="video/mp4"> Video not supported
</video>
<div class="slider-caption ">
<div class="hide">
<h2>Marketing Solutions Company</h2>
<p>feeling special</p>
</div>
<a href="#" class="slider-btn" id="polina onclick=" toggleContent()>Pause</a> </a>
</div>
</li>
</ul>
</div>
<!-- /.flexslider -->
</div>
<!-- /.slider -->
</div>
<!-- /.site-slider -->
</div>
how i can show this paragraph when i paused the video because i use display:none
This Line Needs to be:
Pause
There was one closing Tag to much and the `"? was missing behind the onClick Event.
But there are several other invalid HTML Tags too.
The <source> Tag doesn't gets closed for example.
If the code still does'nt work after correcting all HTML Markup please Post your Javascript Code as well.
I have built a bootstrap video carousel. It is working just fine but, the only problem I have is the carousel keeps sliding to the next slide after 5 seconds. How do I make it stop autosliding and only slide when the user clicks on the left or right arrows? I have pasted the code below.
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-pause=hover>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay muted id="homevid">
<source src="C:\Development Software\Sample Website\videos\Michael Vick 88 yard touchdown pass to DeSean Jackson.mp4" />
</video>
</div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay muted id="homevid">
<source src="C:\Development Software\Sample Website\videos\Vick to Jeremy Maclin for 50 Yard TD.mp4" />
</video>
</div>
</div>
<div class="item">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay muted id="homevid">
<source src="C:\Development Software\Sample Website\videos\Michael Vick Scramble Plays vs Rams 2011.mp4" />
</video>
</div>
</div>
</div>
By adding data-interval="false"
<div id="carousel-example-generic" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover" >
From the documentation
Option - Interval - ..If false, carousel will not automatically cycle.
2021 Update
In Bootstrap 5 it is data-bs-interval="false"
<div id="carousel-example-generic" class="carousel slide" data-bs-interval="false" data-ride="carousel" data-pause="hover">
Documentation
There are two ways.
1.
Update 2022: Bootstrap 5.x
In your HTML code, you need to use data-bs-interval="false"
<div id="your-carousel-id" class="carousel slide" data-bs-interval="false">
</div>
Bootstrap 4.x
In your HTML code, you need to use data-interval="false"
<div id="your-carousel-id" class="carousel slide" data-interval="false">
</div>
2.
If you want to do with the help of Jquery then you need to add.
// document ready
$(document).ready(function(){
// Event for pushed the video
$('#your-carousel-id').carousel({
pause: true,
interval: false
});
});
Thanks :)
To stop the autoplay is by just removing the attribute data-ride=”carousel” from the htmlcode
<div id="carousel-example" class="carousel slide" data-ride="carousel">....</div>
There is another way to stop autoplay just add below code in your js file
$(window).load(function() {
$('.carousel').carousel('pause');
});
Paste this code on your custom Javascript file.
$('.carousel').carousel({
interval: false
});
In react-bootstrap in order to stop cycling you have to use
<Carousel interval={null}>
...
</Carousel>
There is an update on bootstrap
https://getbootstrap.com/docs/5.1/components/carousel/
data-bs-interval="false"
for bootstrap v5.2:
Just remove "data-bs-ride:carousel" part from the div tag having "carousel slide" in order to stop the auto-slide
By adding data-interval="false" and removing data-ride="carousel" to the carousel id or class
I spent a lot of time on why data-bs-ride=false does not work for this and i understand it now.
In version 5.0 and 5.1, notice in documentation under options subsection it says
Autoplays the carousel after the user manually cycles the first item. If set to 'carousel', autoplays the carousel on load.
This just means that data-bs-ride=false, data-bs-ride=true or data-ride="carousel" it will still auto slide so we have to use
data-interval="false" and remove data-ride="carousel"
But in version 5.2 the documentation says that
If set to true, autoplays the carousel after the user manually cycles the first item. If set to "carousel", autoplays the carousel on load.
So, we can stop the autoplay by just using data-bs-ride=false or just removing data-bs-ride tag bc it is by default false.
I am trying to recreate the video controls as such that it appears as text and only appears on hover, exactly the same as the videos hosted in this website: http://www.brownsdesign.com/work/, any idea how. I've got the text, but it is not functioning as a playpause button. Any help is appreciated. Thanks.
html:
<div class="item chopsticks hamburger shake">
<video class="noauto" loop="loop" controls="controls" poster="images/27890.jpg" height="auto" width="300">
<source src="videos/b_cs.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"></source>
<img src="images/27890.jpg" alt="" />
</video>
<div class="controller" style="display:none;">
<div class="controlContainer">
<a class="vidPlay" style="cursor: pointer;">Play</a>
<a class="vidPause" style="cursor: pointer;">Pause</a>
<a class="vidStop" style="cursor: pointer;">Stop</a>
</div> <!-- end .controlContainer -->
</div> <!-- end .controller -->
</div> <!-- end .item chopsticks hamburger shake -->
So why not use jQuery?
$('.item').hover(function() {
$('.controller').slideDown();
}, function() {
$('.controller').slideUp();
});