Develop Reference

Website Mobile Navigation bar is visible to the right of the toggle button HTML CSS

The website works fine in desktop view but the media query navigation bar on mobile is shown in the rightmost corner so it's not really hidden
CSS
links{
position:absolute;
background:#f44336;
padding:5px;
line-height: 50px;
height:100vh;
width:200px;
top:0;
right:-200px;
text-align: left;
z-index:2;
transition: 1s;
}
js
<SCRIPT>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0px";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</SCRIPT>

Set right = "-999px" maybe can work on mobile like what you want:
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0px";
}
function hideMenu(){
navLinks.style.right = "-999px";
}
</script>

Creating Fade In / Fade Out effects in Javascript

I have grid class in javascript and when hover on some areas, an different image displays. I want this image to fade in/ fade out when displayed.
Hereby an exemple of the effect (could't figure out how it was made) : https://dustinthierry.com/
I am not sure how I should do it, as I am not directly using the CSS :hover .
Any leads ?
for (let i = 0; i < hovergrid.length; i++) {
if (hovergrid[i].hover(mouseX, mouseY)) {
console.log("hover on " + i)
hovergrid[i].display(i)
}
}
display(number) {
this.img = document.getElementById("displayedimage")
this.img.style.display = "block"
this.img.src = "images/" + number + ".jpg"
this.img.style.right = this.posx + "px"
this.img.style.bottom = this.posy + "px"
this.img.alt = picdes[number]
#displayedimage {
display: none;
position: absolute;
width: 30%;
}

You could use plain CSS for that effect. Using plain CSS will simplify your code, and also let you use CSS transitions.
Here's a rundown of what you could do:
Put your normal elements inside a Div (as in the OPULENCE text in the example)
Make your Div's position Relative. This will allow you to position certain elements inside of it, inside the dive
Create an overlay element that that is normally transparent
Put your images inside the overlay and make them invisible: opacity:0
Upon the hover of your overlay element, you can change the opacity of the image inside of it: div.overlay:hover > img {opacity: 1}.
.container{
width:500px;
height:500px;
background:black;
overflow:hidden;
position:relative;
}
h1{
text-align:center;
color:#ffffff;
margin-top:30px;
}
.overlay{
width:100%;
height:100%;
background:transparent;
position:absolute;
top:0;
left:0;
}
.overlay img{
width:200px;
position: absolute;
bottom:50px;
right:20px;
transition: all 0.5s;
opacity:0;
}
.overlay:hover > img{
opacity:1;
}
<div class="container">
<h1>Some text here</h1>
<div class="overlay">
<img src="https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
</div>
</div>
Please note that because of the positionings, your overlay doesn't necessarily have to contain the whole element. It can be in a place, totally irrelevant to the image.
Also if you want to have more than one image, you can split your overlay into more inner elements that each have an image, and do the same thing for all of them.
This cleans up your Javascript and gives you all the CSS functionalities needed.

Custom cursor in html [duplicate]

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.

The Google card's "Flip and Grow" effect

I have been doing some research on how to create a flip and grow effect like Google card does (click on any card):
http://www.google.com/landing/now/#cards/restaurant-reservations
All resources I found is about flipping a card with front and back of same size but this is not what I'm looking for.
Any feedback will be hugely appreciated.

Both of the answers posted here are good generic css flippers but they don't address the core of the question which is "how does Google do it?". The problem is that google minifies and therefore obfuscates their code which makes it tough to tell exactly whats going on but using a DOM inspector you can get a pretty basic idea. This is the abstract:
Build a "clone" div that contains a front and a back child div but is hidden by default. Set it's css transition property to ~.5seconds so that any move it makes will be animated.
When a user clicks on a card in the grid, set the clone so it's the same position/dimensions as the clicked card, copy the contents of the clicked card into the front child element and set it as visible
Hide the original clicked card with visibility:hidden
At this point you now have a clone of the originally clicked card in the exact same place but no one can tell
Set css for top, left, height, width of the clone div to precalculated dimensions centering in the screen while also setting transform:rotateY() of the front/back children
At this point it appears as if the div is lifting up, flipping around, and moving/resizing to the center of the screen. An empty spot is left behind because the original card is still there, but visibility:hidden allows it to take up space without showing its contents
A click handler is set up so that when the user clicks outside of the clone card, the top,left,height,width,transform:rotateY() css is reset back to the original values which make it fly back in place.
Then the clone is hidden again and the original card is made visible
Demo: http://jsfiddle.net/jwhazel/AaU6v/11/
(Developed in Chrome, may need some vendor prefixes for other browsers)
HTML
<div class="cards">Generic Tile Card</div>
<div id="cardClone">
<div id="cloneFront">cardclone front</div>
<div id="cloneBack">cardclone back</div>
</div>
CSS
body {
position: relative;
font-family:Helvetica, Arial, Sans-serif;
text-align:center;
}
.cards {
margin:30px;
width:200px;
height:200px;
background-color:#59A3FF;
cursor:pointer;
display:inline-block;
overflow:hidden;
}
img {
display:block;
width:80%;
height:auto;
margin:0 auto
}
#cardClone {
position:fixed;
display:none;
margin:30px;
width:200px;
height:200px;
-webkit-transition:.6s;
transition:.6s;
-webkit-transform-style::preserve-3d;
transform-style:preserve-3d;
z-index:99;
perspective: 1000px;
-webkit-perspective: 1000px;
}
#cloneFront, #cloneBack {
backface-visibility: hidden;
width:100%;
height:100%;
position:absolute;
-webkit-transition:.6s;
transition:.6s;
overflow:hidden;
}
#cloneFront {
z-index:100;
background-color:#59A3FF;
transform: translatez(0);
}
#cloneBack {
transform:rotateY(-180deg);
z-index:101;
background-color:#aaa;
}
Javascript
//Cache the clone since we have to select it a couple of times
$clone = $('#cardClone');
//Set a global for the card we just clicked so we can track it
$lastelement = "";
//Set up an object for last clicked element so we know where to return to on collapse
lastelement = {
'top': 0,
'left': 0,
'width': 0,
'height': 0
};
//Set a flag to determine the current flip state of our clone
cloneflipped = false;
//Bind a handler to the clone so we can detect when the transition is done
$('#cardClone').on("transitionend", function (e) {
if (e.target === e.currentTarget) {
if (e.originalEvent.propertyName == 'top') {
//Toggle the clone state
cloneflipped = !cloneflipped;
//Detect if our clone has returned to the original position and then hide it
if (!cloneflipped) {
$($lastelement).css('opacity', 1);
$($clone).hide();
} else {
//Need to dynamically alter contents of the clone rear AFTER it animates? Do it here
//$('#cloneBack').html('hi');
}
}
}
});
$(".cards").click(function () {
if (!cloneflipped) {
//Cache clicked card
$lastelement = $(this);
//Store position of this element for the return trip
//[hack: subtract 30 due to the margin of .cards in this demo]
var offset = $lastelement.offset();
lastelement.top = offset.top - 30 - $(document).scrollTop();
lastelement.left = offset.left - 30;
lastelement.width = $lastelement.width();
lastelement.height = $lastelement.height();
//BONUS: lets check to see if the clicked card is further to the left or the right of the screen
//This way we can make the animation rotate inwards toward the center, google doesn't do this
var rotatefront = "rotateY(180deg)";
var rotateback = "rotateY(0deg)";
if ((lastelement.left + lastelement.width / 2) > $(window).width() / 2) {
rotatefront = "rotateY(-180deg)";
rotateback = "rotateY(-360deg)";
}
//Copy contents of the clicked card into the clones front card
$clone.find('#cloneFront').html($lastelement.html());
//Show the clone on top of the clicked card and hide the clicked card
//[hack: using opacity for hiding here, visibility:hidden has a weird lag in win chrome]
$clone.css({
'display': 'block',
'top': lastelement.top,
'left': lastelement.left
});
$lastelement.css('opacity', 0);
//Need to dynamically alter contents of the clone rear BEFORE it animates? Do it here
//$('#cloneBack').html('hi');
//Flip the card while centering it in the screen
//[hack: we have to wait for the clone to finish drawing before calling the transform so we put it in a 100 millisecond settimeout callback]
setTimeout(function () {
$clone.css({
'top': '40px',
'left': '40px',
'height': '400px',
'width': $(document).width() - 140 + 'px'
});
$clone.find('#cloneFront').css({
'transform': rotatefront
});
$clone.find('#cloneBack').css({
'transform': rotateback
});
}, 100);
} else {
$('body').click();
}
});
//If user clicks outside of the flipped card, return to default state
$('body').click(function (e) {
if (cloneflipped) {
if (e.target === e.currentTarget) {
//Reverse the animation
$clone.css({
'top': lastelement.top + 'px',
'left': lastelement.left + 'px',
'height': lastelement.height + 'px',
'width': lastelement.width + 'px'
});
$clone.find('#cloneFront').css({
'transform': 'rotateY(0deg)'
});
$clone.find('#cloneBack').css({
'transform': 'rotateY(-180deg)'
});
}
}
});

your code is here ! clickFLIPgrove
You can scale size of a div by css property called
transform:scale(2,2);
it will double the size of your element
refer this link for all css effects: cssAnimation
I have created flip effect on hover:
hoverFLIP
html
<div class="cards"></div>
css
body{
position: relative;
}
.cards{
margin:30px;
perspective: 500;
-webkit-perspective: 500;
-moz-perspective: 500;
-ms-perspective: 500;
-o-perspective: 500;
width:200px;
height:200px;
background-color:#59A3FF;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
position:absolute;
cursor:pointer;
/* Animate the transitions */
-webkit-transition:0.8s; text-align:center;
-moz-transition:0.8s; text-align:center;
-ms-transition:0.8s; text-align:center;
-o-transition:0.8s; text-align:center;
transition:0.8s; text-align:center;
}
.flip{
transform:rotateY(180deg) scale(1.2,1.2);
-webkit-transform:rotateY(180deg) scale(1.2,1.2);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
background-color:#FF5959;
}
javascript(add Jquery 2.1.0)
$(".cards").click(function(){
$(this).toggleClass("flip");
});

Try this jsFiddle
Base on this, make a 3d transform and left offset in transition,
-webkit-transform-style:preserve-3d;
-webkit-transform:rotateY(0deg);
-webkit-transition:-webkit-transform 0.25s , left 0.25s;
Use the css3 transform and transition.
Hope this can work for you.: )

maybe you like this one. check out my code using keyframes.
https://jsfiddle.net/jariesdev/y7Lz3mm0/
html:
<div id="logo">
<a>
<img src="http://fallbacks.carbonads.com/nosvn/fallbacks/2053cd7a29af8f37381467e04521a14e.png">
</a>
</div>
css:
#logo {
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
}
#logo a {
display: inline-block;
}
#logo:hover a {
animation-name: rotateThis;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function:ease-in-out;
}
#keyframes rotateThis {
0% { transform:scale(0) rotateY(180deg) translateX(-100%);}
/*60% { transform:scale(.5) rotateY(90deg) translateX(-50%); }*/
100% { transform:scale(1) rotateY(360deg) translateX(0);}
}

how to set the absolute position div center align

I want to show the text text masking effect with animation
Here is my fiddle for what I am trying to achieve: http://jsfiddle.net/qTWTH/2/
I am not able to position the Red text in "center" above theblack text so the efffect should be something like this: http://jsfiddle.net/qTWTH/1/ *BUT aligned Center*
Also how to repeat the animation, this as per the JS, it just animate only once, I want to repeat the JS once the effect is done.
Code: HTML
<div id="mainbox">
<span id="black">Waiting for the task!</span>
<span id="red">Waiting for the task!</span>
</div>
CSS
#mainbox {
width:600px;
text-align:center;
}
#black {
color:black;
font-weight:bold;
font-size:2em;
}
#red {
position:absolute;
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
}
JS
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function () {
console.log(red.style.width);
if (red.style.width == "290px") clearInterval(animation);
red.style.width = parseInt(red.style.width, 10) + 1 + "px";
}, 50);
Let me know if you need any other information.
Please suggest.

Check this fiddle
By centering the div itself, and positioning the red according to that, you'll ensure they line up.
#mainbox {
display: inline-block;
position: relative;
}
html {
text-align: center;
}
#red {
left: 0;
}

To run it again and again change like this:
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function(){
console.log(red.style.width);
if(red.style.width == "290px")
{
red.style.width = "0px"; // here i have changed
}
red.style.width = parseInt(red.style.width,10)+1 +"px";},50);
Correct fiddle: http://jsfiddle.net/arjun_chaudhary/qTWTH/22/

I altered your code slightly, you almost had it
http://codepen.io/nighrage/pen/EAmeF/

<div id="mainbox">
<span id="black">Waiting for the task!</span>
<div id="red">Waiting for the task!</div>
</div>
#red {
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
margin: 0 auto;
margin-top: -37px;
}
change the second span for a div