We Keep Coding

How can I set video not to auto play (but click on logo top left corner 1 times it trigger auto play)

$(document).ready(function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
{
$(".videoslide")
.css("background","#000 url('https://giffindex.com/images/giffindexdeskmat2022.jpg') center")
.css("background-size","cover")
.css("min-height","300px")
$(".videoslide .wrapper").css('background', 'rgba(0,0,0,.2)');
$(".videoslide .cta, .videoslide h1, .videoslide p").delay(500).fadeIn(600);
}
else {
var posterImage = new Image();
posterImage.src = "https://giffindex.com/images/giffindexmanufacturer2022.jpg";
posterImage.onload = (function() {
$(".videoslide .cta, .videoslide h1, .videoslide p").delay(400).fadeIn(300);
});
var videoHero = document.getElementById("videoHero");
videoHero.src = "https://giffindex.com/download/giffindexdeskmat1.mp4";
videoHero.load();
videoHero.addEventListener('loadeddata', function() {
$(".videoslide .wrapper").css('background', 'rgba(0,0,0,0.1)');
$(".videoslide video").fadeIn(200);
updateVideoHeight();
}, false);
}
$(window).resize(function () {
updateVideoHeight();
});
});
function updateVideoHeight() {
if($('.videoslide').height() > $('.videoslide video').height()) {
$('.videoslide video').height($('.videoslide').height());
$('.videoslide video').width('auto');
}
if($('.videoslide').width() >= $('.videoslide video').width()) {
$('.videoslide video').height('auto');
$('.videoslide video').width('100%');
}
}
<script src="js/video.js" defer></script>
<div class="videoslide">
<video autoplay loop preload poster="https://www.giffindex.com/images/giffindexmanufacturer2022.jpg" id="videoHero" style="display:none;height:auto;"></video>
The staff who write this code for our company website has left company almost 10 years cannot contact him to fix.
The site is www.giffindex.com (I want the VDO auto play). The problem is it need to click logo on top left corner 1 time for trigger VDO to running.
What can I try next?

There are 3 ways how you could make autoload work:
The user needs to interact with your website first. In your case, when clicking on the logo, autoload works, because the user has already interacted with your website.
You could use setTimeout() to manipulate the browser (see this answer).
You could use the attribute muted within your <video> tag. Since the audio will not be played, autoload will work (see this example).

How do I control pausing/playing with videos in a carousel?

I have a video carousel created using the flickity carousel library, seen here on codepen. What I want to happen is that when a user slides the carousel, the selected slide stops playing, then the slide that takes the selected, middle position starts to play. Right now, using jQuery, I get the selected slide to initially play:
$(document).ready(function () {
var $partnerSlides = $('.partner-slides').flickity();
function onLoadeddata(event) {
var cell = $partnerSlides.flickity('getParentCell', event.target);
$partnerSlides.flickity('cellSizeChange', cell && cell.element);
}
$partnerSlides.find('.slide video').each(function (i, video) {
video.pause();
$(video).on('durationchange', onLoadeddata);
});
$partnerSlides.find('.slide.is-selected video').each(function (i, video) {
video.play();
$(video).on('durationchange', onLoadeddata);
});
});
But when the slides switch position, the selected slide just moves position and keeps playing, while the new slide takes the middle position and doesn't play.
Is there a way to update those functions each time the carousel slides?

I actually figured out what I thought is the best way to do this. There is an event for the carousel, 'settle.flickity', which fires each time the carousel settles after being slid or autoplayed (More can be read about the flickity events here on flickity. Therefore, this code:
var $gallery = $('.partner-slides').flickity(); //this is the carousel
$gallery.on('settle.flickity', function () {
console.log('Flickity settled at ' + flkty.selectedIndex);
$gallery.find('.slide video').each(function (i, video) {
video.pause();
$(video).on('loadeddata', onLoadeddata);
});
$gallery.find('.slide.is-selected video').each(function (i, video) {
video.play();
$(video).on('loadeddata', onLoadeddata);
});
});
Will play the selected video and pause any video that is not selected.

Prevent link dragging, but still allow text highlighting

I have some data in a table where clicking it will navigate you elsewhere, but people are requesting the ability to highlight the text to be able to copy/paste it elsewhere. Since they are links, the default behavior in HTML is to drag the link... I don't know why or how that is useful, but I want to disable that on certain links.
TL;DR: I want to be able to highlight the text of a link and not drag it.
The gif below should help explain my issue.
The following methods are NOT what I want:
I have seen examples that prevent both highlighting & dragging using something like this
<a draggable="false" href="#">
or this
.no-drag {
user-drag: none;
}
Or this
myElement.ondragstart = function () {
return false;
};
But obviously that is not what I need here.Is what I want possible to do?

In Google Chrome this works
user-select: none;
-webkit-user-drag: none;

#Julien Grégoire's answer above put me on the right track for this, but the below code is the basics of what I ended up using.
var clickedEl = document.getElementById("test");
var limit = 5;
var mouseMoved = false;
function resetEvents() {
clickedEl.onmousemove = null;
clickedEl.ondragstart = null;
clickedEl.onmouseleave = null;
mouseMoved = false;
}
clickedEl.onmousedown = function (downEvent) {
if (clickedEl.attributes.href) {
clickedEl.onclick = function (clickEvent) {
if (mouseMoved) {
clickEvent.preventDefault();
}
resetEvents();
};
}
clickedEl.onmouseleave = function () {
resetEvents();
};
clickedEl.onmousemove = function (moveEvent) {
// This prevents the text selection being dragged
clickedEl.ondragstart = function (dragEvent) {
dragEvent.preventDefault();
};
if (Math.abs(moveEvent.x - downEvent.x) >= limit || Math.abs(moveEvent.y - downEvent.y) >= limit) {
// If user clicks then moves the mouse within a certain limit, select the text inside
window.getSelection().selectAllChildren(clickedEl);
mouseMoved = true;
}
};
};
<a id="test" href="http://stackoverflow.com">Click or select</a>

I'm super late to answer but I'm just gonna leave it here:
Just put draggable="false" inside <a> tag,
<a draggable="false" href="./"></a>
then in CSS you put:
body {
-webkit-user-drag: none;
}

You could detect if user moves the mouse after the click and if so manage selection using window.getSelection. Something like this for example:
var linkEl = document.getElementById('test')
linkEl.onmousedown = function(downEvent) {
var clickedEl = downEvent.target;
var mouseMoved = false;
clickedEl.onmousemove = function() {
// If user clicks then moves, select the whole link
window.getSelection().selectAllChildren(clickedEl);
// Set a flag to prevent opening the link
mouseMoved = true;
// Reset mousemove, else it'll run constantly
clickedEl.onmousemove = null;
// This is only to prevent having the text selection being dragged
clickedEl.ondragstart = function(dragEvent) {
dragEvent.preventDefault();
}
}
if (mouseMoved) {
// If mouse has moved, prevent default
downEvent.preventDefault();
}
}
<a draggable="false" id="test" href="http://stackoverflow.com">Click or select</a>

This is the simplest solution that worked for me. You can change '*' to 'a'.
*, *::after, *::before {
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-app-region: no-drag;
}

Stop Javascript .scrollBottom function

My .scrollBottom button works, but once it auto scrolls to the bottom I can't manually scroll back up because it is active and constantly scrolling down. What does it need for it scroll to absolute bottom and then STOP?
JavaScript
var timeOut;
function scrollToBottom() {
if (document.body.scrollBottom!=0 || document.documentElement.scrollBottom!=0){
window.scrollBy(0,20);
timeOut=setTimeout('scrollToBottom()',10);
}
else clearTimeout(timeOut);
}
HTML
BUTTON

I found that by removing the timeOut=setTimeout('scrollToBottom()',10);
the button scrolls down by 20 pixels on press.
With that information - I changed the window.scrollBy(0,20); to a ridiculous number like: window.scrollBy(0,2000000);
so I got this code:
var timeOut;
function scrollToBottom() {
document.body.scrollBottom!=0 || document.documentElement.scrollBottom!=0
window.scrollBy(0,2000000);
}
And paired with
html {
scroll-behavior: smooth;
}
It does the trick :)

building a Jquery Tool slider like yahoo.com slider details

Hi im trying to achieve a "news slider" like the one you can see in yahoo.com... I almost have the 100% of the code.. (if you want to compare them here is my code http://jsfiddle.net/PcAwU/1/)
what is missing in my code , (forget about design) is that , In my slider you have to clic on each item, i tried to replace Onclick for Hover on the javascript, it worked, but the fisrt image on the gallery stop working, so when you just open the slider, you see a missing image.
Other point.. also very important, in yahoo.com after "x seconds" the slider goes to the next item, and so on ... all the Thumnails are gruped 4 by for 4, (in mine 5 by 5, thats ok) ... after pass all the 4 items, it go to the next bloc..
HOW CAN I ACHIEVE THAT!!. I really looked into the API, everything, really im lost, i hope someone can help me. cause im really lost in here.
Thanks
Here is the script
$(function() {
var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true });
$(".items img").click(function() {
// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }
// calclulate large image's URL based on the thumbnail URL (flickr specific)
var url = $(this).attr("src").replace("_t", "");
// get handle to element that wraps the image and make it semi-transparent
var wrap = $("#image_wrap").fadeTo("medium", 0.5);
// the large image from www.flickr.com
var img = new Image();
// call this function after it's loaded
img.onload = function() {
// make wrapper fully visible
wrap.fadeTo("fast", 1);
// change the image
wrap.find("img").attr("src", url);
};
// begin loading the image from www.flickr.com
img.src = url;
// activate item
$(".items img").removeClass("active");
$(this).addClass("active");
// when page loads simulate a "click" on the first image
}).filter(":first").click();
// provide scrollable API for the action buttons
window.api = root.data("scrollable");
});
function toggle(el){
if(el.className!="play")
{
el.className="play";
el.src='images/play.png';
api.pause();
}
else if(el.className=="play")
{
el.className="pause";
el.src='images/pause.png';
api.play();
}
return false;
}

To fix the hover problem you need to make some quick changes: Change the click to a on(..) similar to just hover(..) just the new standard.
$(".items img").on("hover",function() {
....
Then You need to update the bottom click event to mouse over to simulate a hover effect. Trigger is a comman function to use to trigger some event.
}).filter(":first").trigger("mouseover");
jSFiddle: http://jsfiddle.net/PcAwU/2/
Now to have a play feature, you need a counter/ and a set interval like so:
var count = 1;
setInterval(function(){
count++; // add to the counter
if($(".items img").eq(count).length != 0){ // eq(.. select by index [0],[1]..
$(".items img").eq(count).trigger("mouseover");
} else count = 0; //reset counter
},1000);
This will go show new images every 1 second (1000 = 1sec), you can change this and manipulate it to your liking.
jSFiddle: http://jsfiddle.net/PcAwU/3/
If you want to hover the active image, you need to do so with the css() or the addClass() functions. But You have done this already, All we have to do is a simple css change:
.scrollable .active {
....
border-bottom:3px solid skyblue;
Here is the new update jSFilde: http://jsfiddle.net/PcAwU/4/