I have this code in HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="cars_menu">
<li>Audi
<ul>
<li class="highlight">A4</li>
<li>A6</li>
<li>A3</li>
<li>A5</li>
</ul>
</li>
<li>Volkswagen
<ul>
<li>Golf IV</li>
<li>Golf VI</li>
<li>Golf V</li>
<li>Jetta</li>
</ul>
</li>
<li>BMW
<ul>
<li>E36</li>
<li>E60</li>
<li>E70</li>
<li>Z4</li>
</ul>
</li>
</ul>
</body>
</html>
CSS code:
.highlight {
color: red;
}
And my script file:
$( "ul.cars_menu li" ).click(function() {
$( this ).toggleClass( "highlight" );
});
Anyone know, how to change the color of AUDI, if I click on A4, A6 it should set the color of A4 AND AUDI to red and if for example I click on GOLF IV it needs to change of Volkswagen and GOLF IV to red and so on.
Anyone could help me with this? Appreciate, guys :)
Please change the html code to
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="cars_menu">
<li>Audi</li>
<li>
<ul class="model">
<li>A4</li>
<li>A6</li>
<li>A3</li>
<li>A5</li>
</ul>
</li>
<li>Volkswagen</li>
<li>
<ul class="model">
<li>Golf IV</li>
<li>Golf VI</li>
<li>Golf V</li>
<li>Jetta</li>
</ul>
</li>
<li>BMW</li>
<li>
<ul class="model">
<li>E36</li>
<li>E60</li>
<li>E70</li>
<li>Z4</li>
</ul>
</li>
</ul>
</body>
</html>
Jquery code to
$( "ul.model li" ).click(function() {
$( this ).parent().removeClass( "highlight" );
$( this ).toggleClass( "highlight" );
$( this ).parent().parent().prev('li').toggleClass( "highlight" );
});
Hope it will works!!!.
you need to wrap your jQuery in a :
$(document).ready(function() {
$('ul.cars_menu li').click(function() {
$( this ).toggleClass( "highlight" );
});
});
Reason for this - you need to wait for the DOM to finish loading before you can set the events on the elements further down the page...
$(document).ready event is when the DOM is finished loading & can be manipulated...
Editing to include js fiddle with some examples on how this can be done:
http://jsfiddle.net/7gdzLgam/
The answer on how to target parent elements using jquery that was the original question still applies to example above.
You should be able to use .parent() for this.
Something like:
$( this ).parent().toggleClass( "highlight" );
you can check the value of the li clicked by doing
$( "ul.cars_menu li" ).click(function() {
if ($( this ).text() == 'A4'){
//change css
}
});
The DOM elements will not be created when the js file is downloaded. Your javascript is correct but either you need to include your
<script src="script.js"></script>
at the end of body tag so that it will work.
This is because when the javascript is loaded it checks for the dom element which you have specified in the js file. It will not be able to find the element since the dom is not completely created. So it just neglects it.
Or else wrap the javascript inside
$(document).ready(function(){
//Your code here
});
so that js will not be executed unless the dom elements are created.
Related
we have been given an assignment to make a div with a background image and couple of titles underneath and when you hover over a title it changes the background picture in the div ("thumbnail"). I am really new to jQuery and have no idea how to approach this. I tried the following code but it is not working.
<!DOCTYPE html>
<html lang="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Portfolio</title>
<link rel="stylesheet" href="portfolio.css">
</head>
<script>
$(function() {
$('ul a')
.mouseover(function() {
$('thumbnail').attr('src', this.getAttribute('data-image-src'));
})
.each(function() {
new Image().src = this.getAttribute('data-image-src');
});
}
</script>
<body class="body">
<!--Header-->
<header class="header">
<div class="logo">
<div class="logoimg"><img src="logo.png" width="80px" width="auto"></div>
</div>
<nav class="navbar">
About
Work
</nav>
</header>
<!--Main1-->
<div class="thumbnail"><img src="back1.jpg" width="auto" height="auto"></div>
<ul class="headlines">
link1
link2
link3
link4
</ul>
<!--Footer-->
<footer class="footer">
<p class="fotext">Copyright Vítek Linhart 2017. Don't steal my shit.</p>
</footer>
</body>
</html>
I appreciate any help :)
I guess this is the thing you're looking for. Not a tested code. You've missed to say that thumbnail is a class and also it can be a hover event from jquery (check api.jquery for examples)
<script>
$(function() {
$('ul a').hover(function() {
$('.thumbnail img').attr('src', $(this).data('imageSrc'));
});
});
</script>
You can make use hover event : https://api.jquery.com/hover/
See this example as well : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_hover
I solved it with this code. I wanted to ask though, if there is a possibility to make it animated. When the pictures switch make a fade animation.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
$('a').on('mouseover', function() {
var iSrc = $(this).attr('data-image-src');
$('.thumbnail img').attr('src', iSrc);
});
});
</script>
I am attempting to change the CSS of the page whenever a list is being clicked. However whenever I try and do so the browser just shows the CSS as text and doesn't actually use it for the page. Looked at a bunch of answers on here but cant get any to work.
<ul>
<li>Character</li>
<li>Send Message</li>
<li>Messages</li>
<li>View Blog</li>
<li>History</li>
<li><a id="test" href="styles.css" rel="stylesheet" type="text/css">Dark Theme</a></li>
<li><a id="test2" href="styles2.css" rel="stylesheet" type="text/css">Red Theme</a></li>
<li><a id="test3" href="styles3.css" rel="stylesheet" type="text/css">Light Theme</a></li>
<li>Logout</li>
</ul>
<script>
$(document).ready(function() {
$("#test").attr("href", "styles.css");
});
$(document).ready(function() {
$("#test2").attr("href", "styles2.css");
});
$(document).ready(function() {
$("#test3").attr("href", "styles3.css");
});
</script>
EDIT:
I have tried doing what user neil said to do but whenever I implement the following I am unable to click on the list entries. The cursor does not change to the little hand with a finger you usually get hovering over links. Clicking does nothing.
<li><a class="test" data-src="styles.css">Dark Theme</a></li>
<li><a class="test" data-src="styles2.css">Red Theme</a></li>
<li><a class="test" data-src="styles3.css">Light Theme</a></li>
<li>Logout</li>
</ul>
<script>
$(document).ready(function(){
$(".test").on('click', function(){
$('head').append('<link rel="stylesheet" href="' + this.getAttribute('data-src') + '" type="text/css" />');
});
});
</script>
EDIT2:
I have implemented another users solution which still doesnt work on mine. If you are going to downvote my post please tell me why atleast, I would really like to fix this. My new code:
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="header">
<h1>D20-TABLEKEEPER</h1>
<form action="blurb.php">
<input type="submit" value="BLURB" size="21">
</form>
</div>
<ul>
<li>Character</li>
<li>Send Message</li>
<li>Messages</li>
<li>View Blog</li>
<li>History</li>
<li>Dark Theme</li>
<li>Red Theme</li>
<li>Light Theme</li>
<li>Logout</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
$(document).ready(function(){
$(".changeStyle").click(function(){
var style = $(".changeStyles").attr('data-src');
$('head').append('<link href="'+ style +'" rel="stylesheet">');
});
$(".changeStyle1").click(function(){
var style = $(".changeStyles2").attr('data-src');
$('head').append('<link href="'+ style +'" rel="stylesheet">');
});
$(".changeStyle1").click(function(){
var style = $(".changeStyles3").attr('data-src');
$('head').append('<link href="'+ style +'" rel="stylesheet">');
});
});
</script>
With jQuery I can offer no real assistance but with vanilla javascript it is quite easy to do. Assign an id to the original stylesheet so that it can be targeted easily, use querySelectorAll to identify the links used to switch css and assign an event listener to each. The code below also stores the selected value in localStorage so that the user's choice persists across pages / sessions.
Assume three stylesheets ( all in same directory as current page, otherwise paths need to be added ) named styles.css,styles2.css and styles3.css which, for pure simplicity are as follows:
styles.css
----------
html, html *{
background:red;
color:white;
}
styles2.css
-----------
html, html *{
background:blue;
color:yellow;
}
styles3.css
-----------
html, html *{
background:green;
color:orange;
}
<!doctype html>
<html>
<head>
<title>css style switcher - no jQuery</title>
<link id='style' href='styles.css' rel='stylesheet'>
<script type='text/javascript'>
function bindEvents(){
var css=document.getElementById('style');
var col=document.querySelectorAll('a.changeStyle');
/* iterate through collection and assign listener */
for( var n in col )if( col[n].nodeType==1 ) col[n].onclick=function(e){
e.preventDefault();/* prevent jumping to top of page etc */
var el=typeof(e.target)!='undefined' ? e.target : e.srcElement;
/* assign style attributes */
css.href=el.dataset.style;
css.rel=el.dataset.rel;
css.type=el.dataset.type;
/* store reference to style selected in localstorage */
localStorage.setItem( 'style', el.dataset.style );
};
/* if there is a reference to the user's css choice in storage, assign it */
if( localStorage.getItem( 'style' )!=null ) css.href=localStorage.getItem( 'style' );
}
document.addEventListener( 'DOMContentLoaded', bindEvents, false );
</script>
</head>
<body>
<ul>
<li><a href='character_sheet.php'>Character</a></li>
<li><a href='send_message.php'>Send Message</a></li>
<li><a href='view_messages.php'>Messages</a></li>
<li><a href='view_blog.php'>View Blog</a></li>
<li><a href='history.php'>History</a></li>
<li><a href='#' class='changeStyle' data-style='styles.css' data-type='text/css' data-rel='stylesheet'>Dark Theme</a></li>
<li><a href='#' class='changeStyle' data-style='styles2.css' data-type='text/css' data-rel='stylesheet'>Red Theme</a></li>
<li><a href='#' class='changeStyle' data-style='styles3.css' data-type='text/css' data-rel='stylesheet'>Light Theme</a></li>
<li><a href='index.php'>Logout</a></li>
</ul>
</body>
</html>
First of all, I don't see anywhere where you're binding a click
$(document).ready(function(){
$(".test").on('click', function(){
$('head').append('<link rel="stylesheet" href="' + this.getAttribute('data-src') + '" type="text/css" />');
});
});
And your html
<li><a class="test" data-src="styles.css">Dark Theme</a></li>
<li><a class="test" data-src="styles2.css">Red Theme</a></li>
<li><a class="test" data-src="styles3.css">Light Theme</a></li>
This way, on any .test click, you append a <link> for the css to your head.
You need to add it in head section of the page.
Eg
$("a").click(function () {
$('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');
});
Please refer this tutorial
http://www.rickardnilsson.net/post/Applying-stylesheets-dynamically-with-jQuery
I tried it. And, it was working.
HTML Page
<html>
<head>
<link href="styles.css" rel="stylesheet">
<title>asd</title>
</head>
<body>
<a class="changeStyle1" data-src="style.css">style1</a>
<a class="changeStyle" data-src="style1.css">style1</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".changeStyle").click(function(){
var style = $(".changeStyle").attr('data-src');
$('head').append('<link href="'+ style +'" rel="stylesheet">');
});
$(".changeStyle1").click(function(){
var style = $(".changeStyle1").attr('data-src');
$('head').append('<link href="'+ style +'" rel="stylesheet">');
});
});
</script>
</body>
</html>
style.css
a {color:red;}
style1.css
a {color:green;}
My problem is the .click event below. The 'nav' and '#closemenu' div hide as expected on document ready, but the click event won't work to save my life. Either I'm missing something embarrassingly small (which I hope is unlikely because I copy/pasted the code from the jQuery API page and then changed only the ID and alert) or else I have no idea what my issue is. Any help is much appreciated.
Here's my code:
$(document).ready(function() {
$('nav').hide();
$('#closemenu').hide();
$('#menuicon').click(function() {
alert('Hello, test');
});
});
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<h1>Page Title Here</h1>
<div id="menuicon">
<img src="mobile_menu.png">
</div>
<nav>
<ul>
<a href="">
<li class="upCase">Projects</li>
</a>
<a href="">
<li clas s="upCase">Profile</li>
</a>
<a href="">
<li class="upCase">Contact</li>
</a>
</ul>
</nav>
<div id="closemenu">
<p>X</p>
</div>
</header>
</body>
Why don't you just add the event directly like this
For multiple div use the below
$( "#menuicon" ).bind({ click: function(){ alert ();}
});
How can I call a Javascript function test() as below for the onselect event (upon selection of menu item) of a menu item as for my below code?
I have always worked on OnClick event in button but I have no idea about OnSelect events for the menuitems, how to call a function onselection of menuitem.
Can anyone suggest how can my code below work and call my function test() (code 1) on selection of menu item named Log Report as in code-2?
<ul>
<li>Log Report</li>
</ul>
Code-1
<script>
function test() {
window.open("www.google.com");
}
</script>
Code-2
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test screen</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 230px; }
</style>
</head>
<body>
<ul id="menu">
<li>Database</li>
<li>Log
<ul>
<li>Log Report</li>
</ul>
</li>
</html>
To not create a function for every li, suggest the use of data attribute
<ul id="menu">
<li>Database</li>
<li>Log
<ul>
<li data-page="www.google.com">Log Report</li>
</ul>
</li>
</ul>
Then pass it in the function
$('#menu li').click(function(){
test($(this).data('page'));// which will give "www.google.com" if clicked on the Log Report
}
function test(url){
window.open = url;
}
I think you looking for this
$("#menu").on("click", "li", function(event){
test();
console.log('clicked');
});
Hope this helps...
More info DEMO JSFiddle
As you are using jQuery UI Menu Widget, Use select event, it is triggered when a menu item is selected.
$('#menu').menu({
select: function (event, ui) {
test();
}
});
Another way is
$("#menu").on("menuselect", function (event, ui) {
test();
});
Use click event
$("#menu li").click(function(){
test();
});
I have 5X5 text box with letters that randomly change every few seconds. I figured out how to make the box selectable. Now I want to be able to retrieve the letter that's appearing within the box at the time that I click. I'm new to coding, but after researching, I thought I could combine the .click function with the .text() function. I add a tag and tried to print the clicked letter within it. It's not working. I'm I using the .text() function incorrectly? I haven't used it before so I'm not sure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>LetterTouch</title>
</head>
<link rel = "stylesheet" type="text/css" href="gameboard.css">
<!-- <link href="scripts/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css"/>-->
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#squares").selectable();
});
var nIntervId;
var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
function changeLetters() {
nIntervId = setInterval(boardGen, 1500);
}
function boardGen() {
$('li').each(function (i, e) {
$(e).text(letters.charAt(Math.floor(Math.random() * letters.length)));
})
}
$( "li" ).click(function() {
$( this ).text();
$( "p" ).html( );
});
changeLetters();
</script>
<body>
<ol id="squares">
<li class="A1"></li>
<li class="A2"></li>
<li class="A3"></li>
<li class="A4"></li>
<li class="A5"></li>
<li class="B1"></li>
<li class="B2"></li>
<li class="B3"></li>
<li class="B4"></li>
<li class="B5"></li>
<li class="C1"></li>
<li class="C2"></li>
<li class="C3"></li>
<li class="C4"></li>
<li class="C5"></li>
<li class="D1"></li>
<li class="D2"></li>
<li class="D3"></li>
<li class="D4"></li>
<li class="D5"></li>
<p> H </p>
</body>
</html>
Might be this is what you are trying to do http://jsfiddle.net/jogesh_pi/X24s9/
$("document").ready(function() {
$("#squares").selectable();
$( "#squares" ).on('click', 'li', function() {
var txt = $( this ).text();
$("p").html(txt);
});
});
Just pass the text of that clicked li element as the parameter of html() function gonna be run on behalf of the p tag.
Try,
$("#squares li").click(function() {
$("p").html($(this).text());
});
And also your html seems invalid, please try to close that <ol> tag
Since you're inserting the characters inside the li, you will want to use .text() to pick them up.
e.g.
$( "li" ).click(function() {
$( "p" ).html($(this).text());
});
what this does is that I took the html content of the li - referenced by $(this).text(), and assigned that to be the content of the p element. How .html() works is that placing a string parameter in it assigns that to its html content.
Simply use the .text() property.
$("p").html($(this).text());