I am trying to create an image which is initially hidden - but reveals itself once the document has loaded completely via the JavaScript file.
$(document).ready(function () {
document.getElementById("theImage").style.visibility = "visible";
});
#theImage {
visibility:hidden;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kami Nelson Bio </title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="KNelson-Styles.css" rel="stylesheet" type="text/css">
<script src="respond.min.js"></script>
<script src="KNelson_reveal.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="theImage">
<img src="images/Kami-100.jpg" alt="Kami Nelson Image"/>
</div>
<div id="div1" class="fluid">
<h1>Bio for Kami Nelson</h1>
<p>Text</p>
</div>
</div>
</body>
</html>
Why is this not working?
Thank you in advance.
You should either include jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Or use native window.onload() instead of $(document).ready()
window.onload=function () {
document.getElementById("theImage").style.visibility = "visible";
}
You are missing the jQuery library reference
You are not properly
using selecter to select image of id theImage.
theImage is supposed to be for the img tag.
JavaScript
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("#theImage").css('display':'block');
});
</script>
CSS
#theImage {
display: none;
}
HTML
<img id= "theImage" src="images/Kami-100.jpg" alt="Kami Nelson Image"/>
why don't you just draw the image when the window loads?
give your image an id i'll use "image" for this example.
<script>
window.onload = function ()
{
$('#image').css({"display":"block";});
}
</script>
Related
For example, my html code is as follows:
<html lang="en">
<head>
<meta charset="utf-8">
<title>add style inline in js</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="one">
<div class="two">
link
</div>
</div>
<script src="js/my-scripts.js"></script>
</body>
</html>
I want to select elements and style them in my-scripts.js file like css:
.one .two a:hover{color:red;}
I have a sample jquery code:
function injectStyles(rule) {
var div = $("<div />", {
html: '<style>' + rule + '</style>'
}).appendTo("body");
}
$("button").on("click", function() {
injectStyles('a:hover { color: red; }');
});
https://css-tricks.com/snippets/javascript/inject-new-css-rules/
but I want to do this without using jquery and without using the button.
(Apply styles after loading script file)
I want to define my css code in js and define each one separately as "inline" for each element.
Thanks to the professors
You could create a template class in your css file like this
.colorOnHover a:hover {
color: red;
}
And then you can use document.querySelector to get the element and add the colorOnHover to the classList of that element.
// your js file
const element = document.querySelector(''); // pass in the ID or the class of the element you want to add the changes to
(function() {
element.classList.add('colorOnHover');
})();
// this will add `colorOnHover` class to the classList and apply the css defined to the class in your css file.
Make sure to link the javascript & css file (if any) using <script src = "pathHere" defer></script> and <link rel = 'stylesheet' href = "pathHere>" respectively
update : since the op didn't want to use querySelector
You could use document.createElement('style') and append it to the html file, it would be similar to manually inserting a tag
(function() {
const styleEl = document.createElement('style');
styleEl.textContent = '.one .two a:hover{color:red;}';
document.head.append(styleEl);
console.log('added new style tag');
})();
This how to inject your CSS to to <style> tag :
JS & jQuery code :
function injectStyles(rule) {
$("style").append(rule);
}
$("button").on("click", function() {
injectStyles('.one .two a:hover{color:red;}');
});
HTML code :
<html lang="en">
<head>
<meta charset="utf-8">
<title>add style inline in js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="one">
<div class="two">
link<br>
<button type="button">Make the link hover Red</button>
</div>
</div>
<script src="js/my-scripts.js"></script>
</body>
</html>
I'm trying to use Javascript to change the src attribute of an image (id: big-img) to that of a smaller image (class: clicky) when the smaller image is clicked to create . Unfortunately it doesn't seem to be working. Code provided below.
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Always use meta tags in head first -->
<!-- Sets character encoding (utf-8 = unicode) -->
<meta charset="utf-8">
<!-- Sets width of the page to width of the device and sets initial zoom
value to 1.0. Used for mobile viewing -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Linking in bootstrap (css) and author styles. -->
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- For simple Javascript concept exercises -->
<div id="practice">
<p>
Does this work?
</p>
</div>
<!-- For image related complex(ish) Javascript exercises -->
<div class="container">
<div class="row">
<div class="clicky col-md-3"><img src="img/img1.jpg"></div>
<div class="clicky col-md-3"><img src="img/img2.jpg"></div>
<div class="clicky col-md-3"><img src="img/img3.jpg"></div>
<div class="clicky col-md-3"><img src="img/img4.jpg"></div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<img id="big-img"
class="large-img"
src="img/img1.jpg">
</div>
</div>
</div>
<!-- <div class="col-md-12">
<img id="bigImage"
class="large-img"
src="img_1.jpg"
alt="graffittied building"/>
</div> -->
<!-- Linking in Jquery library, bootstrap (JS) and my scripts. Imported in
that order due to bootstrap requiring some Jquery features so needs to be
lower in source order -->
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
Javascript:
$(".clicky").click(function(){
$("#big-img").attr('src',
$(this).attr('src'));
});
As clicky is not img element it doesn't have src attribute thus the code is working as expected.
You need to traverse to img element the fetch its attribute, there are various ways to achieve that. Here in code I have used .find() method since img is child of clicky element
$(".clicky").click(function(){
$("#big-img").attr('src', $(this).find('img').attr('src'));
});
OR, You can bind event with img element then your code will work
$(".clicky img").click(function(){
$("#big-img").attr('src', this.src);
//$("#big-img").attr('src', $(this).attr('src'));
});
function change_img(){
$(document).on("click",".clicky img",function(){
var el = $(this);
var src = $.trim(el.attr("src"));
(src !=="") ? $("#big-img").attr("src",src) : '';
});
}
$(function(){
change_img();
});
Try this:
$(".clicky").click(function(){
$("#big-img").attr('src',
$(this).find('img').attr('src'));
});
clicky class is attached to a div not to an img so it does not have a src attribute
What you can do is this:
$(".clicky > img").click(function(){
$("#big-img").attr('src', $(this).attr('src'));
});
But if you want to to attach the listener on the div, you can do this:
$(".clicky").click(function(){
$("#big-img").attr('src', $(this).find("img").attr('src'));
});
$(this) refers to the clicked element : <div>. You need to get img thats inside the div.
$(".clicky").click(function(){
$("#big-img").attr('src',$('img', this).attr('src'));
});
To complete :
$(".clicky").on('click', function(e){
$("#big-img").attr('src',$('img', this).attr('src'));
});
I was wondering, is it possible to change the attached stylesheet using JavaScript?
For example:
<link href="stylesheet.css" rel="stylesheet" type="text/css">
.....
<div id="controls">
<div id="red" onClick="styler(1)">R</div>
<div id="green" onClick="styler(2)">G</div>
<div id="blue" onClick="styler(3)">B</div>
<div id="reset" onClick="styler(4)">Reset</div>
</div>
JavaScript
function styler(attr){
switch(attr){
case'1':document.----- = "stylesheet1.css";break;
case'2':document.----- = "stylesheet2.css";break;
case'3':document.----- = "stylesheet3.css";break;
case'4':document.----- = "stylesheet.css";break;
default:;break;
}
}
Add an id to the link tag and use
<link id="myStyleSheet" href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function styler(attr){
var href;
switch(attr){
case'1':href = "stylesheet1.css";break;
case'2':href = "stylesheet2.css";break;
case'3':href = "stylesheet3.css";break;
case'4':href = "stylesheet.css";break;
default:;break;
}
document.getElementById('myStyleSheet').href = href;
}
</script>
See this post
It should be easy:
<html>
<head>
<link rel="stylesheet" href="/tmp/default.css" id="default">
</head>
<body>
<button id="bt">change style</button>
<script>
var targetStyle = document.querySelector('#default'),
otherStyle = '/tmp/style2.css';
document.querySelector('#bt').onclick = function(){
targetStyle.href=otherStyle;
};
</script>
</body>
</html>
Try it
<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</head>
<body>
<h2>Javascript Change StyleSheet Without Page Reload</h2>
<button onclick="swapStyleSheet('dark.css')">Dark Style Sheet</button>
<button onclick="swapStyleSheet('blue.css')">Blue Style Sheet</button>
<button onclick="swapStyleSheet('default.css')">Default Style Sheet</button>
</body>
</html>
Another option is to toggle the disabled property of the link DOM element. According to Mozilla the disabled HTML attribute is non-standard, but the javascript property is. So if you're toggling it with JS you should be fine.
When i click one of the buttons i want the paragraphs to change size depending on the button i've clicked. That doesn't seem to work. I've checked everything and with my level of knowledge of jQuery (beginner ) i can't figure it out so i need your help. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<input type="button" id="smaller" value="smaller text" />
<input type="button" id="bigger" value="bigger text" />
<p > Some text inside of it.</p>
<p > Some text inside of it too!</p>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="query.js"> </script>
</body>
</html>
jQuery
$('#bigger').click(function() {
$('p').addClass('.bigger');
});
$('#smaller').click(function() {
$('p').addClass('.smaller');
});
CSS
.bigger {
font-size:30px;
background-color:red;
}
.smaller {
font-size:10px;
}
Remove . from addClass() because the function already recognize the string like a class without specifiy the class selector.
try this:
$('#bigger').click(function() {
$('p').addClass('bigger'); //instead of .bigger
});
$('#smaller').click(function() {
$('p').addClass('smaller'); //instead of .smaller
});
DEMO
Remember $.addClass("bigger"); not $.addClass(".bigger");
Demo
http://jsfiddle.net/dieegov/ebGQ2/
The "Call 2062710041" pops up before the pages loads all the way and the the button isnt event touched. Whats wrong with the code?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>home</title>
<link rel="stylesheet" href="themes/style.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2 /jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <script>
$('#phone').on( 'tap',"#phone",goto());{
function goto(event){
window.location = 'tel:2062710041'}};
</script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline" >
<div class="leftstyle"> <img src="message.gif" width="40" height="39"></div>
<div class="rightstyle"> <img src="call.gif" id="phone" width="40" height="39"> </div>
<div class="center"> <img src="LOGO.png" width="209" height="210" > </div>
Using this method below will allow you to wait until the page is loaded to perform anything inside of it. This is jQuery's ready function.
$(document).ready(function() { /* your code. */ });
Same process outside of jQuery.
document.onload = function(){ /* your code. */ };
Use jquery's ready() function to bind the tap on full load. Try:
$(document).ready(function () {/*your code*/})
You also have a couple of extra {} brackets
$('#phone').on('click', function(event){
event.preventDefault();
if(event.handled !== true)
{
location.href = 'tel:2062710041';
event.handled = true;
}
return false;
});`