I have been debugging this issue for a good while now and I am so confused to why this isn't working.
As you can see I am running the following code on JSFiddle and it seems to work without any issues at all:
$(".assistance-submit-btn").hover(function() {
$(this).children('i').toggleClass("assistance-submit-btn-mouseover");
});
.assistance-submit-btn {
font-size: 1.4rem;
font-weight:300;
padding: 10px 20px;
background: none;
border: 2px solid #333;
border-radius: 10rem;
color: #333;
margin: 25px auto 0;
display: block;
}
.assistance-submit-btn-mouseover {
transform:translate(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="assistance-submit-btn" value="Submit">Submit <i class="fa fa-caret-right"></i></button>
As you can see when the assistance-submit-btn element is hovered it will add a class to the i element.
This code is a direct copy from my local website that I am developing however for some reason on my local system it will not execute when the assistance-submit-btn element is hovered.
So far I have tried adding a CSS hover to the element itself just to see whether or not the element was behind another element and unable to hover.
The only difference that I can think of on my local setup is that the assistance-submit-btn element is pulled in by AJAX. Could this effect the jQuery hover event? Any suggestions to why this might be happening would be much appreciated.
Thanks
UPDATE: Forgot to mention I am getting no errors within my console.
Yes, it's because of Ajax dynamic content. Use this code:
$(document).on({
mouseenter: function () {
$(this).children('i').addClass("assistance-submit-btn-mouseover");
},
mouseleave: function () {
$(this).children('i').removeClass("assistance-submit-btn-mouseover");
}
});
Related
I've been attempting to use the js .toggle feature to change the class of a link to turn it from one colour to another onclick.
<html>
<style>
.the-button-inactive {
display: inline-block;
height: 20px;
width: 20px;
border-radius: 10px;
background-color: black;
}
.the-button-active {
display: inline-block;
height: 20px;
width: 20px;
border-radius: 10px;
background-color: blue;
}
</style>
<body>
<div class="the-button-container">
</div>
<script>
function myFunction() {
var element = document.getElementByID("the-image-1-id");
element.classList.toggle("the-button-active");
}
</script>
</body>
</html>
The link already has the "the-button-inactive" class and I'm trying to switch it to "the-button-active" class on click using the above script though I'm not sure why it's not working. The ultimate goal would be to get the link to change colour from black to blue when clicked and then from blue to black again when another link is clicked.
So far, nothing happens when the link is clicked.
I was able to achieve this previously using buttons instead of links, but have decided to try to tackle this issue using links now.
Here is the jsfiddle I'm using to test this script: https://jsfiddle.net/tqr2h4pb/
The toggle method won't affect the classes that already exist, which is why .the-button-active is persisting.
HTML:
click
Javascript:
function myFunction() {
const element = document.querySelector("#the-image-1-id")
element.classList.toggle("the-button-active")
element.classList.toggle("the-button-inactive");
}
This worked for me to toggle inactive and active states
you had a typo in your code. Change getElementByID to getElementById and it works fine.
you should always check the console for debugging
it says Uncaught TypeError: document.getElementByID is not a function"
I'm designing a dark mode for my website. Given I have a lot of written content, that would be especially helpful for evening reading. I have a toggle and have borrowed a function that seems to work so far:
$(function() {
$(".switch").click(function() {
$("#canvas-wrapper").css("background", "#222");
$("p").css("color", "#DDD");
});
});
I want the user to toggle these changes on and off as desired. However, when I attempt to add another line - defining a css change for another element - the function only applies the style to the first #canvas-wrapper element. Everything thereafter is ignored.
Is my syntax incorrect later in the function? Also, I need to write the function in a way that returns the CSS to its original state, should the user deactivate the toggle. How would I approach this?
I'm quite poor with jQuery and haven't had a ton of experience with the language.
Instead of changing every single element, you can define the dark mode styles in your CSS, and just use jQuery to toggle the dark-mode class.
I'm assuming clicking the .switch twice would change it back to light mode, and that your current CSS shows the light mode styles by default.
CSS:
#canvas-wrapper.dark-mode {
background: #222;
color: #DDD;
}
jQuery:
$(function() {
$(".switch").click(function() {
$("#canvas-wrapper").toggleClass("dark-mode");
});
});
If you like, you can use CSS variables as well. However, it would still involve class toggling/changing somewhere in your code. Using CSS variables but using vanilla JS: https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8
you may have to write some css for each element whether its in light or dark mode. use javascript to toggle between the two. You can have a class for light mode (.light-mode) then one for dark mode. as long as class-wrapper is a div you should be ok.
I would use a js variable with global access for the mode and tie that into a function.
css
.light-mode{
some more css classes for light mode
}
.dark-mode{
some more css classes for dark mode
}
You need to use css with a target class. Jquery toggleClass() will do the job
.bgDark{background: #4a4a4a !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv" class="" style="background: #fff393; border: 1px solid black; width: 100px; height: 100px"></div>
<button onclick="$('#myDiv').toggleClass('bgDark')">toggle bg</button>
You can resolve this issue by doing some tricks, direct answer for your question is by implement toggleClass for dark/light theme.
for example you look to this demo
<div class="change-color">
<p>Hello World</p>
</div>
<div class="change-color">
<p>Hello World 2</p>
</div>
<button>Change color</button>
and our script:
// find elements
var anotherColor = $(".change-color")
var button = $("button")
// handle click and add class
button.on("click", function(){
anotherColor.toggleClass("another-color")
})
and our style:
body {
background: #000;
color: red;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
.another-color {
background: #ddd;
}
But you can resolve issue too by using root variable color, for example:
:root {
--color-bg: #000;
}
.default-color {
background-color: var(--color-bg);
}
.another-color {
--color-bg: #ddd;
}
You can look to this demo too
I want a css class to work for only one object at a time. I want to activate it only when I hover over an object with that class. When my cursor leaves that object the class should still be activated. But when I hover over a second object with that class it should simultaneously start working for that object and stop working for the previous object.
The css I am trying to implement this way is for a set of thumbnail images and is as follows
{
box-shadow: 0 0 5px red;
}
None of the images should have this css activated by default when the page loads. How do I do it? Open to any kind of solution here css/javascript/jquery/plugin/anything elce. Can anyone help?
Use :hover:
The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
REF: https://developer.mozilla.org/en/docs/Web/CSS/:hover
div:hover {
box-shadow: 0 0 5px red;
}
<div>11111</div>
<div>22222</div>
<div>33333</div>
Solution 2: use mouseover event (or hover as #abeyaz's answer), remove all active then add the active class to the current one.
The hover() function is more high level - it's built to call functions to handle both a mouseenter event and a mouseleave event. It's very convenient for a UI element that has a hover and normal state (e.g. a button.)
The mouseover() function specifically binds to the mouseover event. It's best for situations where you only care when the mouse has crossed the border into an element and you don't really care what happens if it leaves. It's also the function to call when you want to trigger the event on some element.
jQuery provides hover() as a convient way to handle common UI hovering states.
mouseover() is more for manually accessing the specific browser event.
REF: https://www.quora.com/jQuery/jQuery-What-is-the-difference-between-the-hover-and-mouseover-functions
$('div').on('mouseover', function(){
$('div').removeClass('active');
$(this).addClass('active');
})
.active {
box-shadow: 0 0 5px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>11111</div>
<div>22222</div>
<div>33333</div>
You can do it easily using jquery as in this fiddle https://jsfiddle.net/4f1g1yxf/. You can do it easily using jquery as in fiddle below. The idea is simple; remove the class from activated one first, then add to the new one.
$(".box").hover(function(){
$(".box.activated").removeClass("activated");
$(this).addClass("activated");
});
.activated {
box-shadow: 0 0 5px red;
}
.box {
display: inline-block;
margin-right: 30px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
Try the next approach:
CSS:
.abc {
box-shadow: 0 0 5px red;
}
HTML:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
JS:
jQuery('*')
.bind('mouseover', function (event) {
var o = jQuery(this);
if (!o.find('.abc').length) {
o.addClass('abc');
}
})
.bind('mouseout', function () {
jQuery(this).removeClass('abc');
});
P.S. Instead of '*' put the proper class or element identifier to limit event scope.
How can i preserve appearance of the dragged A element when using 'draggable' html5 attribute. On some browsers (Safari & Chrome) when dragging anchor, dragged helper is replaced with browser native implementation of dragged element as seen on the screenshots:
When dragging DIV
When dragging A
HTML
<div class="draggable">Draggable DIV</div>
Draggable A
CSS
$('.draggable').attr('draggable', true);
Here is the quick JSBin i assembled to demonstrate this issue http://jsbin.com/pihayeceza/1/edit
Thanks
I'm able to preserve the appearance of the dragged element by using DataTransfer.setDragImage. If I add the following code to the JavaScript in your jsbin instance, it work for me on Firefox, Chrome and Safari:
$('a.draggable').on('dragstart', function (ev) {
var dt = ev.originalEvent.dataTransfer;
// In IE browsers, setDragImage does not exist. However, the issue we are
// trying to fix does not happen in these broswers. So if setDragImage is not
// available, then just don't do anything.
if (dt.setDragImage)
dt.setDragImage(ev.target, 0, 0);
});
The dataTransfer field of the event has a DataTransfer object associated with the drag operation. You have to fetch it from the original DOM Event rather than from the jQuery Event wrapper, so ev.originalEvent.dataTransfer.
For IE browsers, setDragImage is not present but the problem reported in the question does not occur in the first place so if setDragImage is absent, we just don't call it.
A bin with the updated code.
This problem happens because the default behavior of dragging a link with an href attribute is to create an image containing the url to be used as the drag placeholder. You can fix this by removing the href attribute, however, to get around that without having to remove the href attribute you can use mousedown/up event handlers to remove the attribute and then re-add it, leaving the anchors clickable*.
$('.draggable').attr('draggable', true).on('mousedown', function () {
if ($(this).is('a')) {
$(this).data('href', this.href);
$(this).removeAttr('href');
}
}).on('mouseup', function () {
if ($(this).is('a')) {
$(this).attr('href', $(this).data('href'));
}
}).on('click', function () {
console.log(this.href);
});
.draggable {
margin: 10px;
display: block;
width: 200px;
background: #fafafa;
color: #333;
text-decoration: none;
height: 40px;
border: 1px solid #eaeaea;
line-height: 40px;
text-align: center;
cursor: move;
border-radius: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="draggable">Draggable DIV</div>
Draggable A
*Note: stack snippets doesn't let you follow the link.
Wrap your anchor tags with a div and set draggable="false" on the anchor tag.
<div class="draggable">
Draggable A
</div>
You will need additional styling to prevent the button/link from looking blue and underlined.
.draggable a {
color: inherit;
text-decoration: inherit;
}
modified your jsbin here
http://jsbin.com/rebayif/edit
Before you read this please get up this website to see what I am trying to do:
https://www.kris-willis.com
As you can see there is a RED arrow located below the menu and what it is that I'm trying to achieve is... when I hover over a menu button the arrow moves to the same button I'm hovering over without reloading the page.
Ideally I'd like the arrow to move back to a default button.. and also for the default button to change if clicked on a different menu button.
If you know any links to examples etc... I would really appreciate it!
Thank you for your time,
Kerry x
The first thing is that you have a wrong DOCTYPE.
<!DOCTYPE html PUBLIC "">
This causes you page to load in quirk mode. Change it to
<!DOCTYPE html>
for HTML5 or use the complete one including the FSI & FPI.
Second is you are using a <table> for navigation. Nothing seriously wrong with it but people tend to use ul
For the :hover, you can simply use
#MenuPosition table tbody tr td:hover
{
background-image: url("/images/Arrow.jpg");
}
You might have to play with paddings and margins or maybe use display: block or display: inline-block to position the arrow correctly.
Make the "buttons" anchors. Using css set create a rule for :hover to set a background image that contains the arrow.
There are plenty of CSS tutorials out there, Nettuts and Webdesigntuts have a lot of navigation articles. Or if you are comfortable with emulating others, find a site you like and pick apart the source until you figure out how they did it.
Keep in mind that javascript is not at all necessary to accomplish what you are doing. Unless you want some animations, and even then CSS can handle most of that work, pure CSS in my opinion is the better approach.
PURE CSS SOLUTION
Check this answer.
Is there any way to hover over one element and affect a different element?
So it might be:
#thething {
margin: 0;
}
.classone:hover + #thething {
margin-top: 10px;
margin-left: 10px;
}
If they're adjacent siblings in a parent div.
Just move the arrow bymargin-left with respect to left of the td DEMO
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
Tp do this Add jQuery libirary to the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Add this code in a external js file and add it to head section of your page
$(function(){
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
});
});
EDIT : For restoring the arrow orignal position use
$(function(){
currentPos = $("#Arrow").css("margin-left");
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left});
});
$("#MenuPosition").on("mouseout","td",function(){
$("#Arrow").css({"margin-left":currentPos});
});
});
NOTE : PLEASE SEE THE CALCULATION PART AND CORRECT IT.
PS: cant correct is because its my log out time from office ;) . but i thing you got the logic to do it
You can do something like this:
Using a span to add the bg arrow below the nav/menu lis in the HTML:
<ul class="nav">
<li>
Menu 1
<span class="arrow"> </span>
</li>
<li>
Menu 2
<span class="arrow"> </span>
</li>
</ul>
The CSS:
.nav {
font-size: anypx;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
.nav li {
background: #whatev;
display: block;
float: left;
height: anypx;
line-height: anypx;
padding: 0;
text-align: center;
}
.nav li a {
color: #any;
display: block;
padding: any;
position: relative;
text-decoration: none;
width: auto;
}
.arrow {
background: url("images/arrow.png") no-repeat scroll 0 9px transparent;
display: none;
height: anypx;
text-indent: -9999px;
width: whatevs;
z-index: 9999;
}
And Finally the JS/Jquery that makes it work:
$(document).ready(function(){
Your_menu();
});
function Your_menu(){
$(".nav li").hover(function(){
$(this).find('.arrow').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('.arrow').css({visibility: "hidden"});
});
}
Here is a site that is showing this :)
http://www.drexelmedicine.org/