I want to edit the rendering of an element when hovering. To achieve this, I created a button and I want the first click to set the hover rendering and the second click to reset the hover rendering. Currently, the hover style appears even when I'm not on the div:
$("#editer-script").click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.contenu-editable').mouseover(function(){
$('.contenu-editable').css("background-color", "transparent");
$('.contenu-editable .fa.fa-pencil').css("display", "none");
});
$("#editer-script").text('Rendre éditable');
} else {
$('.contenu-editable').mouseover(function(){
$('.contenu-editable').css("background-color", "#f4f6f9");
$('.contenu-editable .fa.fa-pencil').css("display", "inline-block");
});
$("#editer-script").text('Ne pas rendre éditable');
}
$(this).data("clicks", !clicks);
});
Thank you in advance for your help.
I would use two different css classes. One default and one for the change of the hover effects. And then just toggle the second class on click of the button element.
It's mutch easier than try to do it your way and it could be easily changed and extended just in css. No need to touch the script in the future.
$("#editer-script").click(function() {
var clicks = $(this).data('clicks');
$('.contenu-editable').toggleClass('special', !clicks);
$("#editer-script").text(clicks ? 'Rendre éditable' : 'Ne pas rendre éditable');
$(this).data("clicks", !clicks);
});
.contenu-editable:hover {
background-color: transparent;
}
.contenu-editable:hover .fa.fa-pencil {
display: none;
}
.contenu-editable.special:hover {
background-color: #f4f6f9;
}
.contenu-editable.special:hover .fa.fa-pencil {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="editer-script">Rendre éditable</button>
<div class="contenu-editable">
<i class="fa fa-pencil">pencil</i>
content
</div>
Related
First I'll show my code
const mainButton = document.getElementById("start__button").addEventListener("click", function(event){
event.target.parentNode.removeChild(event.target);
});
By clicking button, I want it to disappear and then appear new elements on page like navbar etc. The problem is I can't handle it at this point and I need some help :P
As indicated by the tags on your posts, you are using jQuery.
So, try the following:
First, add the display: none style to all elements that should be hidden at the beginning. You can for convenience use a hidden class.
.hidden {
display: none;
}
Then, add an onclick event to the button that hides the button and reveals all previously hidden elements.
$("start__button").on("click", function() {
$(this).hide();
$(".hidden").show();
});
const mainButton = document.getElementById("start__button").addEventListener("click", function(event){
document.getElementById("navbar").classList.toggle("hidden");
});
.hidden{
display:none;
}
<navbar id="navbar">My navbar body....</navbar>
<button id="start__button">My Button</button>
This might help you
By the classList.toggle() function, you can toggle the class of the navbar or any other html element on clicking the button and after that using simple css, you can not only hide or show the element but also do other changes
Removing the whole element from the document and then again adding it by element.innerHTML = "..." is not recommended
Thanks.
You can group all of the content you want to show after click in a wrapper element.
const mainButton = document.getElementById("start__button");
mainButton.addEventListener("click", function(event){
this.remove();
document.querySelector('main').classList.remove('hidden')
});
.hidden {
display: none;
}
main > * {
padding: 1rem;
}
nav, footer {
background: black;
color: #fff;
}
<button id="start__button">start</button>
<main class="hidden">
<nav>Navigation</nav>
<section>Content</section>
<footer>Footer</footer>
</main>
I used the following code to toggle a button class in order to make a full-screen mobile menu.
HTML
button class="hamburger hamburger--slider" type="button">
<a href='#'><div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</a>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function(){
$('.hamburger--slider').toggleClass('is-active');
});
});
});
Now I would like to hide another item in my header when the toggled class .is-active is present.
The following code works to hide the item, but once the toggled class is gone, the item does not reappear but stays hidden until the page is reloaded.
jQuery(function($) {
if ($('.hamburger--slider.is-active').length) {
$('.rey-headerCart-wrapper').hide();
}
});
Appreciate any help :) !
you have to show the element again after the burger menu closes:
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function(){
$('.hamburger--slider').toggleClass('is-active');
// hide / show other element
if ($('.hamburger--slider.is-active').length) {
$('.rey-headerCart-wrapper').hide();
} else {
$('.rey-headerCart-wrapper').show();
}
});
});
});
Or in vanilla javascript:
window.addEventListener("load", () => {
document.querySelector(".hamburger").addEventListener("click", () => {
document.querySelector(".hamburger--slider").classList.toggle("is-active");
// hide / show other element
const cart = document.querySelector(".rey-headerCart-wrapper");
if (document.querySelector(".hamburger--slider.is-active")) {
cart.style.display = "none";
} else {
cart.style.display = "block";
// apply original display style
// cart.style.display = "inline-block";
// cart.style.display = "flex";
};
});
})
In order to make toggle functions like this more understandable, maintainable and extendable you need to think about your HTML structure.
In your current structure, you have a button that toggles a class on itself. Therefore any element beyond that button that has to change appearance or beaviour has to check which class that button has, or you have to extend the click-event handler in order to add these elements (that's what you did here).
This can get quite messy really fast.
A better approach could be to not toggle a class on the button but on an element that is a common parent to all elements that you want to change the behavior of.
That way anything you ever add to that wrapper already can be manipulated via CSS, without the need of changing your JS.
$('.nav-toggler').on('click', function() {
$('#nav-wrapper').toggleClass('active');
});
.menu, .cart {
padding: 1em;
margin: 2px;
}
.cart {
background: #FFF000;
}
.menu{
background: #F1F1F1;
display: none;
}
#nav-wrapper.active > .menu {
display: block;
}
#nav-wrapper.active > .cart {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav-wrapper">
<button class="nav-toggler">Toggle</button>
<div class="menu">My Menu</div>
<div class="cart">My Cart</div>
</div>
Here is the answer to the question, thanks to #CumminUp07
I've found this link to be helpful, except that I do not want the suggestions div to disappear after an element is selected in the suggestions div in order to select more suggestions later. I have tried to implement this strategy with the slideUp() and slideDown() jquery functions, but of course that is not as fast as the show() and hide() jquery functions, and trying to speed up the sliding functions ends up stopping the suggestions div from appearing again.
Here is a plunker of what I am currently stuck on:
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click(function() {
$('#search').val($(this).html());
$('#suggestions').slideDown();
$('#search').focus();
});
#search,
#suggestions {
width: 200px;
}
#suggestions {
display: none;
border: 1px solid gray;
border-top: none;
}
#suggestions div:hover {
background-color: #99CCFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" value="" />
<br />
<div id="suggestions">
<div>Toronto</div>
<div>Seattle</div>
<div>Dallas</div>
</div>
I do not believe this is a duplicate to Action on blur except when specific element clicked with jQuery, because the timeout does not work well enough for the functionality I desire, nor does it allow you to ensure I can click two different divs while keeping one of those two divs open until a different object in the document is selected.
You can stop the animation from completing and then just show the suggestions
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click( function() {
$('#suggestions').stop(true,true).show();
$('#search').focus();
$('#search').val($(this).html());
});
Maybe it will help you
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click(function() {
$('#search').val($(this).html());
$('#search').blur();
});
https://jsfiddle.net/vc15r7qb/
I have a div called title, and another one called description.
I have managed to make the div description appear while hovering on title.
here is the fiddle
Now I want to make the div description stay visible while I'm hovering on it (ON THE DESCRIPTION DIV).
Once i remove the hover form the div description, it should hide.
Here is my html
<span class="title">Last</span>
<div class="description">some description</div>
Here is my JS
var cancel = false;
$("div.description").hide();
$(".title").hover(function () {
cancel = (cancel) ? false : true;
if (!cancel) {
$("div.description").hide();
} else if (cancel) {
$("div.description").show();
}
});
And this is the CSS
.title { background: red; }
.description { background: yellow; }
You may not need jQuery to do this.
Given the markup you provided, just use plain CSS and utilize the adjacent sibling combinator, +:
Example Here
.description {
display: none;
}
.title:hover + .description,
.description:hover {
display: block;
}
If you need to use jQuery, you can just include the .description element in your jQuery selector:
Updated Example
$(".title, .description").hover(function () {
// ...
});
I'm trying to change a spoiler but i have problem with javascript code
This is the spoiler:
http://nathan3000.altervista.org/Jdownloader%20Spoiler/zzzz.html
When i click the image "MAC" the spoiler opens. When i click again MAC the spoiler closes. But when i click between the text the spoiler closes again. I do not want the spoiler closes when I click in the middle of the text but only when i click image "MAC". How can i do change selector so it only show/hides when i click the image?I'm still clicking inside the .OS container
I don't understand why the table border doesn't appear on online version while on local version I can see the borders of tables.
The javascript code for spoiler is this:
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(this).find(".details").is(":visible"))
{
$(this).find(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(this).find(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
Thanks in advance
This is working:
$(document).ready(function(){
$(".nonjs").removeAttr( "href");
//href is needed for users without JS
$('.OS').click(function(e){
if(!$(e.target).parents('.details').length){
if($(this).find('.details').is(":visible"))
{
$(this).find('.details').not(":hidden").hide("slow");
return true;
}
else
{
$(this).find('.details').show("slow");
return false;
}
}
});
});
put your spoiler/ popdown menu directly after your .OS image. right now your popdown is a child of the .OS container, so clicks on it are passed to the .OS click handler.
here is something like you want:
http://tempesthostingservices.com/t/zzzz.html