Passing a div class into a javascript function - javascript

Is it possible to pass the class of a div into a javascript function? I am using square space so I cannot add an id to the div, but I can get it to work with div's that do have id's. Also, I already have loaded the jquery.
This is what I am thinking so far, thanks in advance!
<script type="text/javascript">
function unhideme(arg) {
$(arg).slideDown()
}
function clickme(arg1, arg2) {
unhideme(arg1);
unhideme(arg2);
//other stuff
}
</script>
<style type="text/css">
#myid{
display:none
}
.klass{
display:none
}
</style>
<form><input type="submit" onclick="clickme('#myid','.klass')">
<div id="myid"></div>
<div class="klass"></div>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function unhideme(classname) {
$(classname).slideDown();
}
function clickme(classname) {
unhideme(classname);
}
</script>
<style>
.klass {
display: none;
}
</style>
<form>
<input type="submit" onclick="clickme('.klass');return false;">
<div class="klass">testdown</div>
</form>

Related

Easy way to set active class with javascript

I tried to find the easiest way to set the active class to the active Navbar point.
My Code looks like this:
function setActive(i) {
$(document).ready.getElementById(i).addClass("active");
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
<script>
setActive("contact");
</script>
</head>
<body>
<a id="contact" class="nav-link" href="">Example</a>
</body>
Why is this not working?
Thanks for the help!
In jQuery, you use $().addClass(). You should call the function inside $(document).ready(), not have the function run only if the document has loaded.
In your setActive function, it looks like you are mixing up Javascript and jQuery. You should only use one or the other.
$(document).ready.getElementById(i).addClass("active");//this line is a syntax error
.active{
color: green;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function setActive(i) {
$('#'+i).addClass("active");
}
$(document).ready(function(){
setActive("contact");
});
</script>
</head>
<body>
<a id="contact" class="nav-link" href="">Example</a>
</body>
With pure Javascript, you can use Element.classList.add() to add a class to an element.
.active{
color: green;
}
<head>
<script>
function setActive(i) {
document.getElementById(i).classList.add("active");
}
document.addEventListener("DOMContentLoaded", function(){
setActive("contact");
});
</script>
</head>
<body>
<a id="contact" class="nav-link" href="">Example</a>
</body>
To set the contact active you need to this it this way. You already have jQuery in you code so it is more easy.
function setActive(tag){
//This bloc is optinal. It will remove active class from all other elements. You may not need that
$('body a').removeClass('active');
//End optional block
$(`#${tag}`).addClass('active');
}
$(document).ready(function(){
setActive('contact')
});
please try:
function addActive(el){
document.querySelector(el).classList.add("active");
}
You should call setActive("content") inside main.js inside a ready function
You are also missing the id selector (#) in your jQuery selector
$( document ).ready(function() {
setActive("contact");
});
function setActive(id){
$(`#${id}`).addClass("active");
}
.active{
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="contact" class="nav-link" href="">Example</a>
Try this
function setActive(i) {
document.getElementById(i).classList.add("active");
}
function setDisable(i) {
document.getElementById(i).classList.remove("active");
}
.active{
background-color: yellow;
color: red;
}
<html>
<body>
<button type="button" onclick="setActive('demo')">
Activate
</button>
<button type="button" onclick="setDisable('demo')">
Disable
</button>
<p id="demo">Here</p>
</body>
</html>

jQuery mouseenter() and mouseleave() not working properly

I have two simple script html:
<html>
<body>
<style>
.myBtn{
display: none
}
.myBtnReg{
display: block
}
</style>
<button class="myBtnReg" id="btn1" >Click Me!</button>
<script src="jquery-1.11.2.min.js"></script>
<script src="js.js"></script>
</body>
</html>
and javascript:
$(function(){
$("button").mouseenter(function(){
$(this).attr("class", "myBtn");
});
$("button").mouseleave(function(){
$(this).attr("class", "myBtnReg");
});
});
I'm trying to make an effect where the button changes class when ever the mouse enters and change it back when the mouse leaves, the code above doesn't seem to work properly, when I put my mouse over the button it flickers, so I assume I changes class constantly for some reason.
You can put button inside div and then toggleClass of button when you hover over div (you also need to set fixed height on div)
$('div').hover(function() {
$(this).find('button').toggleClass('myBtn');
});
div {
height: 50px;
}
.myBtn {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class="myBtnReg" id="btn1">Click Me!</button>
</div>
your style should be like
.myBtn{
background-color:RED;
}
.myBtnReg{
background-color:Green;
}
your total html is like this
<html>
<body>
<style>
.myBtn{
background-color:RED;
}
.myBtnReg{
background-color:Green;
}
</style>
<button class="myBtnReg" id="btn1" >Click Me!</button>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="js.js"></script>
</body>
</html>

Referencing a CSS class with javascript

<html>
<body>
<head>
<style type="text/css">
#someClass {
color:red;
}
</style>
</head>
<div id="someClass"></div>
<script type="text/javascript">
alert(document.getElementById("someClass").style.color);
</script>
</body>
</html>
As you can see from my code I'm trying to figure out if I can reference a style attribute for a class that's defined in CSS, as opposed to directly in the tag's style attribute.
You're looking for window.getComputedStyle() - small usage example here.
alert(window.getComputedStyle(document.getElementById('someClass')).color);
#someClass {
color:red;
}
<div id="someClass"></div>

How to change image to text using jquery's .hover event

I need a simple script that allows me to change the inner html of a p tag which in my case is an image to just plain text when I hover over it.
Example:
<div id="one">
<p><img src="events.png" alt="" /></p>
</div>
When i hover over the above p tag i want it to change to the text as seen below
<div id="one">
<p>Events</p>
</div>
You don't need to use javascript at all for this. This is handled very simply using css.
<div id="one">
<p>
<span>Events</span>
<img src="events.png" alt="" />
</p>
</div>
CSS:
#one p>span{ display:none; }
#one p:hover span{ display:inline; }
#one p:hover img{ display:none; }
Here's a fiddle of it in action: http://jsfiddle.net/CKpCk/
Try the following:
var html = $('#one p').html()
$('#one').hover(function(){
$('p', this).html('Events');
}, function() {
$('p', this).html(html);
})​
Demo
Try this one:
<html>
<head>
<title>Try</title>
</head>
<script type="application/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#testHover").hover(function()
{
$("#testHover").html("Events");
});
});
</script>
<body>
<div id="one">
<p style="width:200px;"id="testHover"><img src="events.jpg" alt="" /></p>
</div>
</body>
</html>

wrap() method doesn't seem to work in jQuery

$('input.text-1').wrap('<span class="textfield-1"></span>');
.textfield-1 {
border: 1px solid #d00;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="text text-1" />
Wrap() doesn't seem to work. I don't see <span>s wrapped around input in firebug. If they were wrapped, inputs would be hidden with display: none, but they aren't.
What am I doing wrong here?
Works ok for me. Is it possible that you have a javascript error on the page that is preventing the code from executing?
Here's my test. Element does become invisible and I can see that it is wrapped in the span.
<html>
<head>
<style type="text/css">
.textfield-1 {
border: 1px solid #d00;
display: none;
}
</style>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$('input.text-1').wrap('<span class="textfield-1"></span>');
});
</script>
</head>
<body>
<input type="text" class="text text-1" />
</body>
</html>

Categories

Resources