this is my 1st time posting here, so thanks to everyone who can give me some advice!
<html>
<head>
<style>
</style>
<script src="jquery-1.5.2.js"></script>
</head>
<body>
<div
class="super"
style="
border: solid black 1px;
height:100px;
width:100px;
">
</div>
<div
class="super .eight"
style="
background: blue;
">
</div>
<script>
$(".super").click(function () {
$(this).addClass(" .eight");
});
</script>
</body>
</html>
So basically the problem is that I want to add for example a background or some other type of element onto class that is already defined as super. I am trying to use subclasses but it does not seem to be working.
Please ask me if there is anything unclear, I apologize if there is.
No dot (in the classname).
$(".super").click(function () { $(this).addClass("eight"); });
$(".super").click(function () { $(this).addClass("eight"); });
Related
Right now, I have this working iframe for a map.
<div style=" position: absolute; top: 200px; left: 508px; width:300px;max-width:100%;overflow:hidden;height:200px;color:red;"><div id="my-map-display" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=null,+null,+null&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe>
I would like to initially have this hidden and have a function such that I can call and add and remove it on call. I am trying to write something like:
var mapIsOn = false;
showMap(_city, _state, _country){
if(mapIsOn == false){
svg.append("iframe")
... add the features listed above
.attr("id","MAP")
}else{
svg.selectAll("#MAP").remove();
mapIsOn = false;
}
Is there any way to do it? I've seem that it is possible to create div's but so far with this, I am not having much luck. Any help would be really appreciated!
There are lots of ways to achieve that. This is probably the simplest method. Idea is to set display none and remove it when we want to show the map.
.nodisplay {
display : none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#my-map-display").toggleClass("nodisplay");
});
});
</script>
</head>
<body>
<button>Toggle map</button>
<div id="my-map-display" class="nodisplay" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=null,+null,+null&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe>
</body>
</html>
There seems to be padding around the sides of my website, and I cannot get rid of it. Any types of hints will be appreciated.
#introContainer{
background-color: #bdc3c7;
}
#navHeader{
background-color:#95a5a6;
}
#skillsHeader{
background-color:#3498db;
}
<!DOCTYPE html>
<html>
<head>
<title>Local</title>
</head>
<body>
<div id="introContainer">
</div>
<div id="navHeader">
</div>
<div id="skillsHeader">
</div>
</body>
</html>
To remove it add the following:
body { margin: 0; }
You could also search normalize.css or reset.css and add the style before your own style.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Working With DOM</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#gold").addClass("highlight");
});
</script>
<style type="text/css">
body{background-color:#FFCC66;}
#wrap
{margin:0 auto;
border:2px solid #CC8320;
height:500px;}
h1{font-style:italic;
color:#A48713; padding-left:10px;}
#gold{width:200px;
background-color:#D49F55;
height:150px; margin:20px; float:left;height:200px}
input{border:1px solid black; width:150px; margin:0 20px;
background-color:#AA9F55; color:#553F00;font-weight:bolder;text-align:center; }
.info{border:1px solid black; width:150px;background-color:#AA9F55; color:#553F00;font-weight:bolder;text-align:center;margin:0 20px; }
.highlight{background-color:green;}
</style>
</head>
<body>
<div id="wrap">
<h1> Learning Web Engineering Online</h1>
<div data-price="399.99" id="gold">
<h3>Gold Member</h3>
<ul class="course">
<li>HTML5</li>
<li>css3</li>
<li>jquery</li>
</ul>
<form>
<input type="button" value="GET PRICE"/>
</form>
</div>
</div>
</body>
I am having problem with the code above that when using jquery i add class highlight to element with id=gold and inspect it in chrome, although the class is being added to the code the style rule mentioned in highlight class doesn't output in browser. the element is being selected but not styled. what am i doing wrong please help someone.
You should use !important to work it:
.highlight{background-color:green !important;}
Note:
Browser uses ID with higher importance than a class name.
change your css to
#gold.highlight{background-color:green;}
You need to change the priority style for .highlight. Just add #gold before the .highlight style
#gold.highlight{background-color:green;}
The problem here is due to the precendence of CSS selectors. An id selector will override a class selector, so you need to either make the class selector more specific (preferred method):
#gold.highlight { background-color: green; }
Example fiddle
Or aleternatively add !important to it:
.highlight { background-color: green !important; }
However the latter can lead to issues when you have competing !important rules, so it's best to avoid it where possible.
highlight gets applied but as there is background-color property defined in ID it will not be overridden by class value.
As mentioned by #cocco you can use #gold.highlight to override it.
Id has greater precision due to conflict resolution, class css is overridden by your #gold id css
change your class
.highlight{background-color:green !important;}
I have small problem with the following. This is ofc just a snippet of the whole code and it is usually run through a setInterval(time,function); command but I'd like to replace the auto-sliding pictures by having instead a "next" button, why can't I just use jQuery and stick it into a
$("#nextBtn").click(nextSlide);
command ? I get my button appearing but no event. Could it be that I'm putting the jQuery command in a JS
function onLoadWindow(e) {}
instead of jQuery's
$(document).ready(function() {})
I just finished learning the basics of JS recently and started jQ shortly after, so I'm still a beginner in both but with some prior programming experience with Java. I'm kinda new to mixing syntax's together. Thanks a bunch for the help! =)
EDIT : replaced code snippet with full code. I tried skimming it by taking out what wasn't needed like a couple tags and relevant styling. But now it seems I can't even get the div button to send text to console so Im pretty sure there's an obvious "noob" error somewhere, sorry for "wasting" people's time ..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS Slideshow</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.slide {
height:200px;
width:320px;
position:absolute;
opacity:0;
}
img {
width:100%;
height:100%;
}
#slideshow {
position:relative;
}
.active {
opacity:1;
transition:opacity 1s;
}
#nextBtn {
display:block;
float:left;
height:25px;
width:40px;
background-color:black;
margin-top:210px;
}
</style>
<script type="text/javascript">
window.addEventListener("load",onLoadWindow);
var active_slide;
var slides;
function onLoadWindow(e) {
var slideShow=document.getElementById("slideshow");
slides=slideShow.getElementsByTagName("div");
active_slide=0;
slides[0].classList.add("active");
//setInterval(nextSlide,10000);
$("nextBtn").click(nextSlide);
}
function nextSlide () {
slides[active_slide].classList.remove("active");
active_slide++;
active_slide%=3;
slides[active_slide].classList.add("active");
}
</script>
</head>
<body>
<div id="slideshow">
<div class="slide">
<img src="IMG/bridge.jpg" alt="" title="" />
</div>
<div class="slide">
<img src="IMG/leaf.jpg" alt="" title="" />
</div>
<div class="slide">
<img src="IMG/road.jpg" alt="" title="" />
</div>
</div>
<div id="nextBtn"></div>
</body>
</html>
it was indeed just a missing hash symbol to correctly refer to the Id .. thanks to all and of course VeXii for pointing it out x)
How would you make a JQuery popup Note ? This is what I currently have,
Note Code Example
<html>
<head>
<script type="text/javascript" src="jquery.js"> </script>
<style type="text/css" rel="stylesheet">
#popup {
border: 1px solid black;
width: 400px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".HoverMe").mouseenter(function() {
var left = $(".HoverMe").position().left;
var top = $(".HoverMe").position().top;
$("body").append("<div id=\"popup\"> </div>");
$("#popup").css("left",left);
$("#popup").css("top",top);
$("#popup").append("<p> Hello World </p>");
});
$(".HoverMe").mouseleave(function() {
$("#popup").fadeout("fast");
});
});
</script>
</head>
<body>
<div class="HoverMe">
Hover Me
</div>
</body>
</html>
Thats not what I wanted, i wanted something like when you hover some text, it displays a popup with some text. The popup is then aligned center of the text if that makes sense.
Any examples would be useful,
Thank you!
How about using someone else's code for this? I recommend tipsy.
Have a look here. It's not jQuery, although arguably it's an easier technique than jQuery:
http://sixrevisions.com/css/css-only-tooltips/