I want to highlight element on which arrow is pointing while using the onscreen guide for displaying instructions
here is the link for the fiddle
Fiddle
Some of code from fiddle is:
$("#overlay").on("click", function(){
this.style.display = "none";
$("#clk").show();
});
$("#clk").on("click", function(){
$("#overlay").show();
$("#clk").hide();
});
You need to tweak your styles a little bit to achieve this.
Add margin to your overlay div so the main is visible. Likewise, adjust the position of the arrow and the corresponding text to get it to an appropriate position.
Note that this solution wont work if the box is visually inside as in the carmin demo.
updated jsFiddle
Updated CSS:
*{
margin: 0px;
padding: 0px;
}
#overlay{
font-family: "Comic Sans MS", cursive, sans-serif;
position: fixed;
width: 100%;
height: 100%;
margin-top: 120px;
z-index: 999999;
background-color: #000;
opacity:0.5;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#overlay p, #overlay img{
position: relative;
}
#overlay p{
color: blue;
}
#instruction1{
top: 50px;
left: 400px;
}
#arrow1{
width: 100px;
position: relative;
top: -30px;
left: 150px;
}
#instruction2{
top: -10px;
left: 225px;
}
#dismiss{
font-size: 12px;
}
.shome{
display: block;
}
main{
z-index: 0;
}
main div{
padding: 50px;
background: rgb(0,120,170);color:#fff;
z-index: 9999999;
opacity: 0.8;
}
Hope this is what you want. I have remove this.style.display = "none"; from the overlay block. Now it is working.
$("#overlay").on("click",function(){
$("#clk").show();
// $("#overlay").hide(); //Add this line if you need same behaviour while click on overlay.
});
$("#clk").on("click", function(){
$("#overlay").show();
$("#clk").hide();
});
Didn`t understand what did u mean.
Maybe u just need to correct your styles,like this fiddle
I have added a class glow to your div and add the same on the click and removed the same when overlay.
$("#overlay").on("click", function(){
this.style.display = "none";
$("#clk").show();
$("#maincont").removeClass("glow");
});
$("#clk").on("click", function(){
$("#overlay").show();
$("#maincont").addClass("glow");
$("#clk").hide();
});
*{
margin: 0px;
padding: 0px;
}
#overlay{
font-family: "Comic Sans MS", cursive, sans-serif;
position: fixed;
width: 100%;
height: 100%;
z-index: 1;
background-color: #000;
opacity:0.5;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#overlay p, #overlay img{
position: relative;
}
#overlay p{
color: blue;
}
#instruction1{
top: 50px;
left: 400px;
}
#arrow1{
width: 100px;
position: relative;
top: 100px;
left: 150px;
}
#instruction2{
top: 100px;
left: 225px;
}
#dismiss{
font-size: 12px;
}
.shome{
display: block;
}
main{
z-index: 0;
}
main div{
padding: 50px;
background: rgb(0,120,170);color:#fff;
z-index: 1;
opacity: 0.8;
}
.glow{
opacity: 1;
z-index: 2;
color: white;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="overlay" style="display:none">
<p id="instruction1">This is some instruction.<br/>
<span id="dismiss">(tap to dismiss)</span>
</p>
<img id="arrow1" src="http://pixabay.com/static/uploads/photo/2013/07/13/10/13/arrow-156792_640.png" />
<p id="instruction2">This is something cool!</p>
</div>
<main>
<div id="maincont">This is my main content.</div>
</main>
<br/>
<div style="cursor:pointer;background:rgb(0,120,190);color:#fff;padding:10px;width:25%;text-align:center" id="clk">Click to see Instructions.</div>
PS. Your image of the arrow is blocked in this snippet sorry for that
Animating the element your mouse is on, can be done e.g. using .hover from jquery:
$("#maincont").hover(
function() {
$( this ).addClass( "hover" );
},
function() {
$( this ).removeClass( "hover" ); }
);
Although at the moment your overlay div prevents the trigger to fire, because the maincont is "behind" the overlay.
It might be necessary to rethink the design.
EDIT:
Maybe it´s a better aproach to implement some kind of "at mouse position" tooltip mode, which can be activated and show the informations in a mouse-near info div.
Changing the mousecursor to
cursor: help;
CSS property would additionally help to difference between the two modes
Related
trying to include this JS script in my wordpress header:
$(function() {
$('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
$('.hover-link .nav-1 a').toggleClass('bla');
});
});
// Second script - Hover effect on active link
$('.hover-link .nav-1 a').hover(function() {
$(this).addClass("new");
},
function() {
$(this).removeClass('new');
});
$('.hvr-underline-from-center').append('<span class="add-icon"> <i class="fas fa-long-arrow-alt-left"></i></span>');
$('.hvr-underline-from-center').hover(
function() {
$( this ).find('.add-icon').css('opacity','1');
}, function() {
$(this).find('.add-icon').css('opacity','0');
}
);
with no success :(
in this page: https://studiorayz.com/?page_id=50 you are supposed to see the effect.
the script add some hover effect and apply a small arrow to the left of the links.
after googling it I think it's related to the language, like wp is using php and I am not using the script correctly.
please help me I am a complete newb! thanks in advance!
BTW u can see the whole effect here at this codepen:
https://codepen.io/coolzikri/pen/BEbpzO
On WordPress jQuery is run in compatibility mode so you can't use the dollar sign ($) directly like you would in any other non-WordPress project. If you check your browser's console, you'll notice this error message:
TypeError: $ is not a function
Try this instead:
jQuery(function($) {
$('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
$('.hover-link .nav-1 a').toggleClass('bla');
});
});
// Second script - Hover effect on active link
jQuery(function($) {
$('.hover-link .nav-1 a').hover(function() {
$(this).addClass("new");
},
function() {
$(this).removeClass('new');
});
$('.hvr-underline-from-center').append('<span class="add-icon"><i class="fas fa-long-arrow-alt-left"></i></span>');
$('.hvr-underline-from-center').hover(
function() {
$( this ).find('.add-icon').css('opacity','1');
}, function() {
$(this).find('.add-icon').css('opacity','0');
}
);
});
By the way, you don't really need jQuery for this. You can achieve an almost identical effect using CSS only:
/* General */
#nr-1:hover + .bg-1,
#nr-2:hover + .bg-2 {
opacity: 1;
}
.flexboxcenter {
display: flex;
direction: rtl;
float: right;
justify-content: right;
align-items: right;
}
.section-1 {
width: 100%;
height: 100vh;
display: block;
position: relative;
}
.hover-link {
height: 100px;
width: 100%;
z-index: 100000;
}
.hover-link .nav-1 {
z-index: 10000;
}
.svc-title {
direction: rtl;
position: relative;
font-size: 20px;
font-family: 'Heebo', serif;
float: right;
right: 20px;
top: 20px;
opacity: 1;
color: #a2a3a7;
z-index: 100001;
padding-bottom: 30px;
}
.add-icon {
vertical-align: middle;
font-size: 20px;
direction: rtl;
color: #000;
transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-webkit-transition: all 0.25s ease-in-out 0s;
-ms-transition: color 0.25s ease-in-out 0s;
}
.hover-link .nav-1 a {
right: 20px;
top: 50px;
text-align: right;
display: block;
font-family: 'Heebo', serif;
text-decoration: none;
color: black;
font-size: 30px;
letter-spacing: 0.7px;
padding: 0px;
transition: all 500ms ease-in-out;
}
.hover-link .nav-1:hover a {
opacity: 0.4;
}
.hover-link .nav-1 a::after {
display: inline-block;
opacity: 0;
margin: 0 0.25em;
content: "\f30a";
font-family: "Font Awesome 5 Free";
font-size: 0.8em;
font-weight: 900;
transition: opacity 0.5s ease;
}
.hover-link .nav-1 a:hover {
color: black !important;
opacity: 1 !important;
transform: translate(-20px) !important;
}
.hover-link .nav-1 a:hover::after {
opacity: 1;
}
/* Background classes */
.bg-1 {
position: absolute;
top: 0px;
left: 0px;
background: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3f9c78df0edb464244bbabb04d1797d8') center center no-repeat;
background-size: cover;
height: 200vh;
width: 100%;
z-index: -1;
opacity: 0;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.bg-2 {
position: absolute;
top: 0px;
left: 0px;
background: url('https://images.unsplash.com/photo-1421757295538-9c80958e75b0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3628f27cd5768ece147877e2dd792c6c') center center no-repeat;
background-size: cover;
height: 200vh;
width: 100%;
z-index: -1;
opacity: 0.0;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<span class="svc-title"> השירותים שאנו מציעים:
</span>
<section id="section-1">
<div class="hover-link flexboxcenter">
<div class="nav-1">
הדמיות אדריכליות
<div class="bg-1"></div>
<br>
הדמיות פנים
<div class="bg-2"></div>
<br>
הדמיות חוץ
<div class="bg-2"></div>
</div>
</div>
</section>
I'm trying to hide the sidebar to a negative right (-205px) so I can get an effect where the content wrapper and sidebar move at the same time.
The problem is that the sidebar is still being shown on the right? I though I could hide it sending it "outside" the web page. I can't simply use display block none and block on the sidebar because it will not make a smooth animation
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').css('right', '-205px');
$('.content-wrapper').css('margin-right', "0");
$('.full-page-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').css('right', '0');
$('.content-wrapper').css('margin-right', "205px");
$('.full-page-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
.content-wrapper {
background: #fff;
min-height: 100vh;
padding: 1rem 1.5rem 4rem;
transition: all .7s ease;
position: relative;
background: black;
}
#sidebar-right {
background: #fafafa;
border-left: 1px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: -205px;
overflow-x: hidden;
transition: left 1s ease;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-right" class="visible">
<ul class="sidebarList">
<li>
</li>
</ul>
</div>
<div class="content-wrapper">
<button id="toggle-right-sidebar">CLICK ME</button>
</div>
add overflow-x:hidden to your outer container
You need to transition the right CSS property on the sidebar, because that's the one you're changing.
#sidebar-right {
transition: right 1s ease;
}
Adding correct type of transition with equal time for both #sidebar-right and .content-wrapper would solve your issue. Try this code.
.content-wrapper {
background: #fff;
min-height: 100vh;
padding: 1rem 1.5rem 4rem;
transition: all .7s ease;
position: relative;
background: black;
}
#sidebar-right {
background: #fafafa;
border-left: 1px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: -205px;
overflow-x: hidden;
background: red;
transition: all 0.7s ease;
}
#sidebar-right {
transition: all 1s ease;
}
'all' enable to use transition on all property
I am trying to reproduce the effect of the button on the right of this page.
Begin position :
End position after animation :
I have done this HTML code :
<div id="btnFeedbackHome">
<div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
<p>Ideas & feedback</p>
</div>
And CSS :
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: 0;
background-color: #35BDCF;
cursor: pointer;
}
#btnFeedbackHome p{
color: white;
font-weight: 600;
position: absolute;
top: 1px;
right: 8px;
font-size: 14px;
}
#btnFeedbackHome div{
width: 45px;
background-color: #2A97A6;
height: 45px;
}
#feedbackImgHomeBtn {
margin-top: 9px;
margin-left: 7px;
}
For the moment, my code show the end position but i don't know how to do to perform the same translation effect on my div.
Could you help me ?
I think this is what you want. Still any queries feel free to ask.
body
{
overflow-x:hidden;
}
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: -135px;
transition:all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
background-color: #35BDCF;
cursor: pointer;
}
#btnFeedbackHome p{
color: white;
font-weight: 600;
position: absolute;
top: 1px;
right: 8px;
font-size: 14px;
}
#btnFeedbackHome div{
width: 45px;
background-color: #2A97A6;
height: 45px;
}
#feedbackImgHomeBtn {
margin-top: 9px;
margin-left: 7px;
}
#btnFeedbackHome:hover
{
right: 0px;
}
<div id="btnFeedbackHome">
<div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
<p>Ideas & feedback</p>
</div>
You can achieve this with a simple CSS transition on the element. I've created a JSFiddle that builds on your example to show how to do this with no JavaScript as the only thing you need is a hover added to the main container. http://jsfiddle.net/cudome3h/1/
If you do everything that you did and just change the CSS to what I have here you will get a similar effect:
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: -140px;
background-color: #35BDCF;
cursor: pointer;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#btnFeedbackHome:hover {
right: 0;
}
Please see attached codepen example. I am trying to fly a div called .mail-content into view, which I have positioned absolutely out of view. I am trying to fly it in by clicking on .super-btn, and then I want to send it back out-from-view by clicking on .close-btn-mail. The JS is not working for me. Any advice?
Updated Code Pen
$('.super-btn').on('click', function(){
$('.mail-content').css({"transform":"translate(100%,100%)"});
});
$('.close-btn-mail').on('click', function(){
$('.mail-content').css({"transform":"translate(-100%,-100%)"});
});
.mail-content{
background: rgb(0,0,0);
width: 100%;
height: 100%;
position: absolute;
top: -100%;
left: -100%;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.mail-content h1{
font-size: 2em;
position: relative;
top: 10%;
color: #fff;
}
.mail-content p{
font-size: 1em;
position: relative;
top: 10%;
color: #fff;
}
.close-btn-mail{
background-color: red;
width: 100px;
height: 100px;
display: block;
position: absolute;
bottom: 80px;
right: 80px;
}
<a class="super-btn" href="#">Fly-in</a>
<div class="mail-content">
<h1>mail-content should fly in</h1>
<p>and then fly back to where it came from</p>
<a class="close-btn-mail" href="">Send Back</a>
</div>
I want to create a HUD display on the bottom of my game. To the right of the HUD bar will be a nested minimap.
When I hover over the HUD, it will increase opacity of the
When I click on the minimap (child of HUD), it will expand a larger map. When I click on the HUD (parent element), it will apply the opacity rule with toggleClass().
I don't want this opacity rule to be applied when I click on the child minimap though, only when I click on the parent HUD. Right now it's being applied when I click on parent and child.
See DEMO
HTML
<div id="HUD">
<div id="map"></div>
</div>
JS
$("#HUD").click(function(){
$(this).toggleClass("HUDactive");
});
CSS
#HUD {
position: absolute;
overflow: hidden;
height: 15%;
bottom: 0px;
width: 100%;
border-top: thin solid darkgray;
opacity: 0.3;
background-color: black;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#HUD:hover {
border-top: thin solid snow;
opacity: 0.8;
}
.HUDactive {
opacity: 0.8 !important;
}
#map {
color: red;
font-size: 18px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: gray;
height: 100%;
width: 15%;
float:right;
}
In Javascript a concept called "event bubbling" occurs. When you click on an element the events registered to that element occur first. Once they are completed, the event travels to the parent, and so on. You can use this to your advantage in this case, by stopping the event at the "#map" element.
Jquery has a handy way of doing this using stopPropagation.
Just add this code to your example:
$("#map").on('click', function(event){
event.stopPropagation();
});
You can check whether the click was happened in the #map element like
$("#HUD").click(function(e) {
//if #map don't have any descendants then
//if (!$(e.target).is('#map')) {
if (!$(e.target).closest('#map').length) {
$(this).toggleClass("HUDactive");
}
});
#HUD {
position: absolute;
overflow: hidden;
height: 15%;
bottom: 0px;
width: 100%;
border-top: thin solid darkgray;
opacity: 0.3;
background-color: black;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#HUD:hover {
border-top: thin solid snow;
opacity: 0.8;
}
.HUDactive {
opacity: 0.8 !important;
}
#map {
color: red;
font-size: 18px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: gray;
height: 100%;
width: 15%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="HUD">
<div id="map"></div>
</div>