Greetings and thanks in advance for the help. My first hack at javascript. Just trying to add a 2em black border around the slider, and remove the mouse pointer when hovering over the slider (I don't wish to offer links from the pictures).
Link is: www.bakashana.org/test-slider
Here is the entire code:
<html>
<head>
<script language="JavaScript1.1">
<!--
var slideimages=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
//-->
</script>
</head>
<body>
<center><img src="https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-girls-jump-compressor-400x300_c.jpg" name="slide" border="2em" width=400 height=300></center>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-girls-jump-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/All-the-ladies-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/highcompress-banner20-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/banner10-1-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-banner-testing-compressor-400x300_c.jpg")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</body>
</html>
Okay this as you mentioned in comment so there it is. Removing cursor with simple CSS:By adding cursor:none property to slider and using pseudo class :hover to checking if the cursor is hovering the given div and then apply border property to it on other hand disabling the mouse clicks on your slider like this but we need to use jquery for this i have added the jquery in snippet working example below.
var event = $("#yourSlider").click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
// disable right click
$("#yourSlider").bind('contextmenu', function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
#yourSlider{
background:orange;
width:400px;
height:300px;
cursor:none;
}
#yourSlider:hover{
border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="yourSlider"></div>
Thank you all for your help! I tried the abovementioned solutions but wasn't able to get them to work properly (the mouse hand continued to be seen on scroll-over). I found the easiest possible solution, I thought I would post it for others to see.
<style>
#yourSlider{
width:400px !important;
height:300px !important;
border:.2em solid black;
pointer-events:none !important;
}
</style>
The 'pointer-events:none !important' taking care of the scroll-over issue (it didn't work without the !important added), and the border taking care of the border issue.
Thanks again to all who contributed!
Related
I'm creating a CV page, where I included animations - some of them work with additional library: Animate css. It works, but animations start when page is fully loaded - and I want them to happen when scrolled to position where div starts (It's in the middle of page)
I've tried to do that with element .scrollTop, but then I could include value only in px - and i need responsive page ( I use calc() )
There was also possibility that i did something wrong - but i haven't noticed
Just like I said - I want to start animations when div would become in range of sight.
This is possbile, if you combine JQuery with JavaScript DOM or with just JavaScript DOM.
My function might not be the best way, but it works and is fairly simple.
My example starts an Animation when the grey divs Top offset relative to the viewport is lower than 100.
(If you would like to use this make 2 css classes (1 with an animation, 1 without) and set the ID Strings to your HTML Ids)
.Initial{
background-color: #ccc;
color: black;
position: fixed;
}
.AfterScroll{
background-color: #fff;
color: green;
position: fixed;
animation-name: Anim;
animation-duration: 1.4s;
}
#keyframes Anim{
25% {color: red;}
50% {color: blue;}
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript">
$( "#AnimationElementID" ).addClass("AfterScroll");
var set = false; // will be false on page load
$( window ).scroll(function() { //On Scroll Event Handler, Could also be window.onscroll (DOM)
// JS HTML DOM get element position relative to viewport
var rect = document.getElementById("AnimationElementTriggerDivID").getBoundingClientRect();
// This is the offset at where your animation would start, 100 = div is 100px from viewport top
if( rect.top <100 && set==false){
$( "#AnimationElementID" ).toggleClass("Initial");
$( "#AnimationElementID" ).toggleClass("AfterScroll");
set=true; // so we only toggle the class once
}
});
</script>
</head>
<body>
<p class="Initial" id="AnimationElementID">
Hi im a text and I will change color if you scroll
</p>
<div id="AnimationElementTriggerDivID" style="background-color: #ccc; position: relative; top:200px; width:20px; height:2000px"> </div>
</body>
</html>
Maybe someone else can provide a better JQuery only option, or a cleaner function, but until then, feel free to use this.
PS: if possible, please provide Code snippets in order for people to be able to help you better and faster.
so on my site I created a functionality where when I hover on one of the side buttons the image of the tree in the middle changes. You can see the page here.
The animation is working ok, but now I am trying to make the background image responsive within the div. Thanks to this other jsfiddle, I was able to make the original background image responsive using the following CSS:
#arvore {
background: url('http://vistacamisa.greenpeace.org.br/wp-content/uploads/2015/09/arvore_011.png');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 92.7%;
}
The problem is that this CSS does not apply to the image that shows when I hover on the button, and I've hit a roadblock as to how to make it work. Any ideas or suggestions would be much appreciated!
I'm using the following jQuery:
<script type="text/javascript">
(function($){
$('.arvorehover').hover(function(){
$('#arvore').css({'background':'url('+ $(this).attr('target') +')'});
},function(){
$('#arvore').css({'background':''});
});
})(jQuery)
</script>
My buttons have a class .arvorehover and the div with the tree image has the id #arvore.
Thanks so much!
When you set the hover background in your JavaScript using this:
$('#arvore').css({'background':'url('+ $(this).attr('target') +')'});
...it adds a style attribute to the tag: <div id="arvore" style="background:url(....)">, which overrides your entire CSS background declaration, which in turn sets background-size to auto. You can fix your current code by changing only the background-image property:
<script type="text/javascript">
(function($){
$('.arvorehover').hover(function(){
$('#arvore').css({'background-image':'url('+ $(this).attr('target') +')'});
},function(){
$('#arvore').css({'background-image':''});
});
})(jQuery)
</script>
Alternately you can keep the styling in your CSS by toggling a class in your JavaScript:
<script type="text/javascript">
(function($){
$('.arvorehover').hover(function(){
$('#arvore').addClass('hover');
},function(){
$('#arvore').removeClass('hover')
});
})(jQuery)
</script>
And then in your CSS:
#arvore.hover {
background-image: url("some-url");
}
I started to develop a sniper game but i am finding a trouble moving the sniper image inside the div my main goal is when the mouse is over the div i want to change it's image to the sniper image that's what i did :
<center>
<div id="field" class="cursor1">
</div>
</center>
<script type="text/javascript">
$(document).ready(function() {
$("#field").mouseover(function() {
$(this).addClass("cursor");
});
});
</script>
<style type="text/css">
#field
{
width:300px;
height:300px;
border:1px solid;
}
.cursor
{
cursor:url("sniper.jpg") ;
}
</style>
but that didn't work. How can I move the image inside the div?
I would not suggest setting your mouse image with css, because it's easier to adjust image size and center it with replacing mouse cursor with a real image.
$('#box').mouseenter(function(){
$('img').css('display','block');
});
$('#box').mouseleave(function(){
$('img').css('display','none');
});
$("#box").mousemove(function(event) {
$('img').css('left',event.pageX-20);
$('img').css('top',event.pageY-20);
});
I made a simple example of this http://jsfiddle.net/N9pu4/
Also consider using canvas element for rendering graphics.
The basic (CSS 2.1) syntax for this property is:
cursor: [<url>,]* keyword
This means that zero or more URLs may be specified (comma-separated), which must be followed by one of the keywords defined in the CSS specification, such as auto or pointer.
(see https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url?redirectlocale=en-US&redirectslug=CSS%2Fcursor%2Furl)
So you should provide a fallback value:
.cursor
{
cursor:url("sniper.jpg"), auto;
}
#field:hover
{
cursor:url("sniper.jpg") ;
}
I'm trying to build a page so me and my team can position some images freely on the screen. The problem is that I can't figure out a way to make those images draggable. I tried to figure out by myself and came upon this nice topic about it: HTML5 drag and drop to move a div anywhere on the screen?
I've tried to apply this idea to my page and replace "getElementsByID" with "getElementsByClassName" but no dice.
In addition, it would be twice as nice if the draggable image were to respect the responsiveness of the page, if anyone knows how to do that.
Here is the codepen with my attempt: http://codepen.io/GuiHarrison/pen/EsHyr
Thanks!
Well, I just made this up, it's kinda buggy, but you can play around with it.
<html>
<head>
<style>
#mydiv{
width: 100px;
height: 100px;
border: solid black 1px;
position: absolute;
}
</style>
</head>
<body>
<div id="mydiv" onmousedown="ismousedown(1)" onmouseup="ismousedown(0)" onmousemove="mousemove(event)"></div>
<script>
var mousedown = false;
function ismousedown(tf){
if(tf == 1){
mousedown = true;
}
else{
mousedown = false;
}
}
function mousemove(event){
if(mousedown){
document.getElementById("mydiv").style.left=event.pageX;
document.getElementById("mydiv").style.top=event.pageY;
}
}
</script>
</body>
You can use kineticjs for this. Check this!
http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/
This is more relevant,
http://html5example.net/entry/html5-canvas/html5-canvas-drag-and-drop-multiple-images-with-kineticjs
I'm a beginner web designer, and though I would try my hand at JavaScript and jQuery. After looking around W3Schools for a bit, I tried to make a simple jQuery animation, but it doesn't seem to work.
<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
<script>
$(document).ready(function(){
$("#name").blur(funtion(){
if(value==null || value==""){
$("#name").animate({background:#D23E42}, "slow");
}
});
});
</script>
<style type="text/css">
body
{
font-family: Arial;
}
#name
{
background:#6BAA64;
color: #FFFFFF;
border:2px none;
padding:5px;
-webkit-border-radius:8px 8px;
-moz-border-radius:8px 8px;
border-radius:8px 8px;
text-align: center;
}
</style>
</head>
<body style="text-align: center;">
Name:
<br />
<input id="name" type="text" value="Your Name" />
</body>
</html>
I was just trying to setup a simple contact/registration form model, so when the name field was left empty, or wasn't changed, would turn red (on blur).
You got many mistakes in that code:
$("#name").blur(function() {
if (!this.value) {
$(this).css('background-color', '#D23E42');
}
});
Mistakes:
funtion => function
value => this.value.
The value of an input can never be null, it can be only an empty string.
animate => css, and the reason is that you can't animate background-color changes without a plugin.
the color needs to be a string #D23E42 => '#D23E42'
background => background-color.
$("#name") => $(this)
It might be a good idea to stop learning at w3school as it doesn't seem to pay off...
Sorry but you can't animate background, unless you use jColor
From the docs:
All animated properties should be animated to a single numeric value,
except as noted below; most properties that are non-numeric cannot be
animated using basic jQuery functionality (For example, width, height,
or left can be animated but background-color cannot be, unless the
jQuery.Color() plugin is used).
jQuery.animate cannot animate background colours, but only properties like width, height, left, top etc. To animate background colours, you'll have to use a plugin like https://github.com/jquery/jquery-color
You have two mistakes:
The color value is a string, so you need quotes around "#D23E42". Otherwise you're probably seeing a syntax error.
JQuery doesn't actually animate colors anyway. There's a plugin that claims to add this feature though I haven't tried it out:
http://www.bitstorm.org/jquery/color-animation/
jsBin demo
$("#name").focusout(function(){
var value = $.trim($(this).val());
if(value === ''){
$(this).animate({backgroundColor:'#D23E42'}, 500);
}
});
In this demo I used the jQuery UI library to achieve the background fade color.
Use .focusout()
Use $.trim() to prevent empty spaces being accepted as valid input
Always use === to compare values
EDIT
Hede is a demo without the UI
You surely need to redo the color if the user reenter some text:
$("#name").focusout(function(){
var value = $.trim($(this).val());
if(value === ''){
$(this).css({background:'#D23E42'});
}else{
$(this).css({background:'#6BAA64'});
}
});
Demo without the UI library