I'm working on this site, which works good in Chrome and Firefox, but not in Safari or IE.
The round images should change to full size (650px width) image when clicked in a 0.6s transition.
In Safari the border radius in the images is ignored (they are square divs), and the transition doesn't work well, images overlap during transition time..
In Internet Explorer the javascript doesn't do anything, javascript is working, you can see in the paragraph above the images, changing the language works (that's js).
I'm green in all this, so I would like to know what's wrong with this.. how can I fix it?
As far as I know this is not hard for browser to do, and I know the fame IE has, but still this is simple javascript, it has to work doesn't it?
This is how the html of each image looks:
<a name="t1"></a>
<a href="#t1">
<div class="galeria">
<div class="normal" id="t1" onclick="SelectOrUnSelect(t1)">
<img src="galeria/obra/1.Naturaleza.jpg" />
<p>Relato I. Naturaleza</p>
<p>Tale I. Nature</p>
</div>
</div>
</a>
Here's the javascript that changes the class of the images:
var divSelected = null;
function SelectOrUnSelect(x)
{
if(divSelected != null) divSelected.className = 'normal';
divSelected = x;
x.className = 'activa';
}
and the css:
.normal{
width:200px;
min-height:0;
max-height:0;
padding:100px 0;
margin:20px auto;
overflow:hidden;
-webkit-border-radius:100px;
-moz-border-radius:100px;
-o-border-radius:100px;
border-radius:100px;
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
transition:0.6s;
}
.normal img{
overflow:hidden;
margin:-100px 0;
width:150%;
position: relative;
left: -30%;
top:0;
}
.activa{
width:100%;
min-height:400px;
border-radius:0;
padding:0;
margin:0 auto;
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
transition:0.6s;
display:block;
}
.activa:last-child{
margin:0 auto 55px auto;
}
.activa img{
width:100%;
-webkit-border-radius:0.2%;
-moz-border-radius:0.2%;
-o-border-radius:0.2%;
border-radius:0.2%;
}
Thanks for reading and helping!
Here are a few things to try.
Fix the doctype, it should be: <!DOCTYPE html>
Use getElementById:
function SelectOrUnSelect(x) {
if (divSelected != null) {
divSelected.className = 'normal';
}
var el = document.getElementById(x);
divSelected = el;
el.className = 'activa';
}
and change the inline code param to a string, e.g.:
SelectOrUnSelect('t1')
Related
I've tried many codes from multiple answers around internet, but none actually worked..
If images on slider started swapping content inside single .div, the slider didn't work or was collapsing..
I've succeed once, but then changed single thing and when I went back with ctrl+z, it didn't work back again. That got me so angry and hopeless, that I decided to write here.
So this is my 'precious' slider in a snippet. I want single image to be clickable and display different content, which would appear in a .div below, and make other content dissapear.
Side note: When I used this solution with jquery jQuery changing content inside Div
It made the slider once work, then I added 1 line, then went back, and at once it was not working. Which was really strange - this never happened to me, that the code was the same, but didn't work second time. The possible code for .div content swapping, must've been compatible with the slider.
I am a newbie and know nothing about jquery or javascript, so please be considerate!-->
Peek of my website with working slider - same code as below. As I said, I'd want images to be clickable, and change content inside a .div, that would be settled under slider. Each image is different content
"use strict";
var SLIDER_CLASS = 'slider';
var DELAY = 4000;
var sliders = document.getElementsByClassName(SLIDER_CLASS);
initSliders();
function slideAll () {
for (var i=0; i<sliders.length; i++) {
if (!sliders[i].getAttribute('data-slider-paused')) {
slide(sliders[i]);
}
}
}
function slide (slider) {
slider.sliderIndex++;
slider.children[0].style.marginLeft = -slider.clientWidth*(slider.sliderIndex%slider.children.length) + 'px';
}
function initSliders () {
for (var i=0; i<sliders.length; i++) {
var slider = sliders[i];
slider.sliderIndex = 1;
slider.onclick = clickSlider;
}
setInterval(slideAll, DELAY);
}
function clickSlider (e) {
if (!e.target.classList.contains(SLIDER_CLASS)) {
return;
}
var bounds = this.getBoundingClientRect();
if (e.clientX-bounds.left < bounds.width/2) {
this.sliderIndex+=sliders.length;
} slide(e.target);
}
/*SLIDER*/
#sliderbox {
margin-top:-10%;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.slider {
width:900px;
height:300px;
background-color:none;
display:flex;
overflow:hidden;
position:relative;
margin:0px 0;
border:1px solid #FF0
}
.slider:before,
.slider:after {
content:'\27A4';
position:absolute;
top:0;
bottom:0;
left:0;
font-size:400%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:#FF0;
padding:10px;
}
.slider:before {
transform:rotate(180deg);
}
.slider:after {
left:auto;
right:0;
}
.slider > div {
flex: 0 0 100%;
display:flex;
align-items:center;
justify-content:center;
font-size:200%;
color:#FFF;
transition:margin-left .3s;
}
<div id="sliderbox">
<div class="slider" data-slider-paused="true">
<div><img src="../aa7.jpg"/><img src="../aa2.jpg" style="margin-left:10%"/><img src="../aa5.jpg" style="margin-left:10%"/></li></div>
<div><img src="../aa1.jpg"/><img src="../aa3.jpg" style="margin-left:10%"/><img src="../aa8.jpg" style="margin-left:10%"/></div>
<div><img src="../aa6.jpg"/><img src="../aa9.jpg"style="margin-left:10%"/><img src="../aa12.jpg"style="margin-left:10%"/></div>
<div><img src="../aa4.jpg"/><img src="../aa11.jpg"style="margin-left:10%"/><img src="../aa13.jpg"style="margin-left:10%"/></div>
</div>
</div>
This question already has answers here:
Custom Cursor using CSS styling - html/css - javascript
(2 answers)
Closed 3 years ago.
I want to add a image as my cursor inside a div, But i want it to hide and have a normal pointer cursor, when the mouse hovers over any of the link inside that div.
I wrote :
var $box = $(".box");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on("mouseleave",function(){
$myCursor.hide();
})
$box.mousemove(function(e){
$myCursor.css('top',e.pageY);
$myCursor.css('left',e.pageX);
if (!button1.is(":hover") && (!button2.is(":hover"))){
$myCursor.show();
}
else if(button1.is(":hover") || (button2).is(":hover")){
$myCursor.hide();
}
if(e.clientX<$box.width()*0.5){
$myCursor.css('transition','transform 1s');
$myCursor.css('transform','rotate(-270deg)');
}
else if(e.clientX>$box.width()*0.5){
$myCursor.css('transition','transform 1s');
$myCursor.css('transform','none');
}
});
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor:none;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor:pointer;
}
#myCursor{
position:absolute;
height:50px;
width:50px;
top:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>
How do i implement this properly?
Thanks
Much easier to achieve using CSS only. You will have to resize the cursor image beforehand, in this example I resized one to 50x50 pixels (the other in the white box is 64x64).
The , auto is mandatory and defines a fallback.
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor: url(//codestylers.de/rifle.png), auto;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor: pointer;
}
.another-cursor {
background-color: white;
width: 300px;
height: 200px;
cursor: url(//codestylers.de/cursor.png), auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<div class="another-cursor"></div>
</div>
The simple solution is just to adjust the scoping of your selectors:
var $box = $(".box:not(button)"); so the image switch is called whenever the cursor is not over a button. However in your case you should consider reducing the image size so it's closer to the mouse size - as there's a large overlap of image and button before the mouse pointer itself covers the button.
a more complex solution would involve using arrays to register the button coordinates and dimensions, then using mousemove and each to constantly check the image coordinate widths against the stored buttons dimensions but depending on what else you've got going on there could be a performance hit.
If you add pointer-events: none to the #myCursor css you prevent the occasional momentary obscuration of the cursor from the button by the image itself - hence better performance.
var $box = $(".box:not(button)");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on({
mouseleave:function(){
$myCursor.hide();
},
mousemove: function(e){
$myCursor.css({ 'left':e.pageX, 'top':e.pageY });
if (!button1.is(":hover") && !button2.is(":hover")){
$myCursor.show();
} else if(button1.is(":hover") || (button2).is(":hover")){
$myCursor.hide();
}
}
});
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor:none;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor:pointer;
}
#myCursor{
position:absolute;
height:50px;
width:50px;
top:0;
left:0;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>
You can solve this using CSS, there is no need for javascript.
Have a look here:
http://www.w3schools.com/cssref/pr_class_cursor.asp
You might set CSS classes with help of javascript to enable some sort of dependency to other elements.
I want this widget code without jQuery. I checked all posts, but they do not help. its like SUmoME widget.
http://www.appsumo.com/clickminded-2016/
see the top right blue tab. i want that replace to pic in my blog.
I want from the left corner to right slider when mouse hover like this.pls see demo.
Sorry for my bad english :(
HTML
<div id="css">
<img src="https://pbs.twimg.com/profile_images/531885101043302400/4fDwYFQb.png" alt="" />
</div>
CSS
img {
position: relative;
margin: -500px;
left: 0;
transition: left .5s;
}
#css:hover img {
left: 400px;
}
DEMO
If you only care for browsers supporting html5 and css3, use css animations. The syntax's a bit like your existing code when it comes to the key frames.
If you wanna support all browsers, use jQuery's animate funcion, which changes the styles every 100ms or so, thus doesn't require css3 support. The css3 animation solution has a better performance but everyone can afford to run jQuery's animation, you won't really feel any difference.
i hope understand your question correctly...
i made it for you :)
img {
border: 1px solid black;
width:50px;
height:50px;
}
.parent{
top:100px;
padding:3px;
background-repeat:no-repeat;
cursor:pointer;
border: 5px solid black;
}
.parent span{
position:absolute;
top:50px;
transition: left .5s;
left: 0;
margin-left:-100px;
width:50px;
height:50px;
}
.parent:hover span{
left:100px;
}
<a class="parent"> >
<span>
<img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/facebook.png" alt=""><br>
<img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/twitter.png" alt="" />
</span>
</a>
hope its good!
if you have span tag on your code it will effect this tag too... i suggest you to give this specific span an id and probably it will work.
here is an example:
.parent #mySpan{
position:absolute;
top:150px;
transition: left .5s;
left: 0;
margin-left:-50px;
width:50px;
height:50px;
}
.parent:hover #mySpan{
left:50px;
}
<a class="parent">
<span id='mySpan'>
<img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/facebook.png" alt=""><br>
</span>
</a>
I found this Javasript code without (HTML,CSS) working in widget.. but how to do like this mouse hover? DEMO
<script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'absolute';
imgObj.style.top = '240px';
imgObj.style.left = '-300px';
imgObj.style.visibility='hidden';
moveRight();
}
function moveRight(){
if (parseInt(imgObj.style.left)<=10)
{
imgObj.style.left = parseInt(imgObj.style.left) + 5 + 'px';
imgObj.style.visibility='visible';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
//stopanimate = setTimeout(moveRight,20);
}
else
stop();
f();
}
function stop(){
clearTimeout(animate);
}
window.onload =init;
//-->
</script>
<img id="myImage" src="https://lh4.googleusercontent.com/proxy/LxuD_Ceq6NrRGBW2mF_6Cy9zeO_vqkV8ZTRMdzjc_LxE0InnXBLp1_BkWuyhlg0EMJPt-Njzzp5_4cuR562m6dh8QNTW_1kzsf9pXcXiKI2ZK6wEMJH2TAAiQqpQUewNMKI=s0-d" style="margin-left:170px;" />
Here i found it easy steps .... just copy this to HTML widget ...works perfect
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "-80"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 100);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://lh3.googleusercontent.com/-iOMr0KnDFkY/V17Zm0bj49I/AAAAAAAABGw/Ag_ig7sBwYE5qXn6evvNTFSg9KvhQT7lACLcB/h250/Untitled-1.jpg") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 320px;
padding: 0 0px 0 40.5px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
</style>
<div class="gplusbox"><div>
<img src="https://pbs.twimg.com/profile_images/531885101043302400/4fDwYFQb.png" />
</div></div>
I have an alert box with text inside, but I can't think of any ways to move the text down within the alert box div, vertically centering it. I've tried line-height but that of course will not work for the two lines of text that I have when you view it on a browser with a min-width of 320px and max 480px. #alertmsg should remain at the top, however, the text within it should be centered when viewed on a mobile browser. I've also tried Vertical-align, but that doesnt work either. Does anyone have any suggestions?
Any help would be greatly appreciated. I also tried to place a <p> in the JavaScript; no luck.
Here is my CSS:
#alertmsg {
position:absolute;
background-color:#252525;
top:0px;
padding-left:0px;
width:100%;
font-family:'gotham-medium', arial, sans-serif;
src:url("http://www.3elementsreview.com/fonts/gotham-light.ttf");
font-style:normal;
font-weight:normal;
font-size:1.2em;
line-height:1.2em;
text-align:center;
height:63px;
color:#ffffff;
opacity:1;
display:inline-block;
overflow:hidden;
z-index:1000;
border-bottom:2px solid #ff6000;
}
And my JavaScript:
$(document).ready(function() {
if (typeof window.sessionStorage != undefined) {
if (!sessionStorage.getItem('mySessionVal')) {
$('<div />', {
id : "alertmsg",
text :"Join our email list and receive the latest updates at 3Elements Review.",
on : {
click: function() {
$(this).slideUp(200);
}
}
}).appendTo('body').fadeIn(1).delay(6000).fadeOut("slow");
sessionStorage.setItem('mySessionVal', true);
sessionStorage.setItem('storedWhen', (new Date()).getTime());
}
}
});
You could use
#alertmsg {
position:absolute;
top: 50%;
height:63px;
margin-top: -31.5px; /* half height */
}
Demo
I made the fade in and fade out of one div that contain an img zoomed, that works pretty good in Chrome, FF , Safari. But doesn't work in IE9, the function Fade in and Fade out works good but didn't use the img zoomed, is used the img not zoomed.
the stylesheet:
#facearea
{
zoom:150%;
position:absolute;
z-index :1;
border: 0px black solid;
}
#facearea1
{
z-index: 2;
zoom:150%;
position:absolute;
}
javascript/text
unction Mode_3_1()
{
document.getElementById('facearea1').style.visibility = 'visible';
document.getElementById('facearea').style.visibility = 'visible';
document.getElementById('facearea').style.display = 'block';
document.getElementById('facearea1').style.display = 'none';
$('#facearea1').fadeIn( 1000 );
}
the problem i guess is when i set display='none', is like if after that i set display='non' all the "attributes" of the current div are ignored(e.g. zoom:150% or opacity)
I tried to don't use display:none but .hide() or just change the opacity of the img but still not working
Please Can anyone give me some information about this incevenient?
You can try to use zoom:1.5; istead zoom:150%;. I hope that will work, because i don't have IE9 to test it.
I resolved the issue by just putting the !important attribute after zoom:150%
#facearea1,
#facearea
{
zoom:150%!important;
position:absolute;
z-index:1;
border: 0px black solid;
top:190;
left:80;
}