Click on Ike's and you'll notice a div appear below the map. Try to click on the link. It's not working.
I'm using this to show/hide the div's on click
function ikesClick() {
filler.style.display='none';
FrontDeskDesc.style.display='none';
LoungeDesc.style.display='none';
StudyDesc.style.display='none';
IkesDesc.style.display='inline';
};
If you view the page source, you can see the entirety of the Javascript there.
My question is, what do I do to make the link clickable?
I'm almost certain this is happening because of the way it's displaying none/inline.
You can observe the HTML here:
<section id="roomInfo">
<section id="filler" style="display:inline">
Hover over or select a colored area for details about individual rooms and locations in the library.
</section>
<section id="IkesDesc" style="display:none;">
<h1>Ike's - Late Night Diner</h1>
<p>
In the hub of President’s Park, Ike’s provides a late night dining option. Visit dining.gmu.edu for hours of operation.
</p>
<img src="Ikes.JPG" style="max-width:500px; width:100%;" alt="Ike's Facade" />
</section>
<section id = "FrontDeskDesc" style="display:none;">
Get your temporary keys and stuff here!
</section>
<section id ="LoungeDesc" style="display:none;">
loungin'
</section>
<section id ="StudyDesc" style="display:none;">
Studying for finals yo
</section>
</section><!--end room info-->
The problem persists under the section "IkesDesc" where the link to dining.gmu.edu is.
First of all, your link is incomplete:
dining.gmu.edu
So this should be something like:
dining.gmu.edu
Also, since you have jQuery already running on the page, you might want to simplify your code to:
$("#Ikes").click(function() {
$(".objects").hide();
$(this).show();
});
Where Ikes is the id of the clickable img and .objects is the class of all the clickable images.
Also, I saw that it is not possible to click Ikes in FireFox. So you might want to look into that as well.
UPDATE
What seems to be causing the problem is your layout:
you use position:relative; and position:absolute; throughout whereas this is quite dangerous when 'spawning' divs.
For example:
#svg {
display: block;
left: 0;
margin: -55px 0 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
#roomInfo {
background-color: #CCCCCC;
margin-top: 75%;
outline: 1px solid gray;
padding: 5px;
width: 100%;
}
Also, you seem to position some elements as if they have position absolute whereas they actually are placed relative.
I advice you to make the total layout relative such that it is responsive and can handle things as smaller screens and the spawning of divs.
I helped you a bit in this jsFiddle, but I'll leave the rest for you.
Also, look at my jQuery code which basically reduces THIS to the jQuery used in my jsFiddle:
$(document).ready(function() {
$("#area1").click(function() {
$(".extra").hide();
$("#IkesDesc").show();
});
$("#area2").click(function() {
$(".extra").hide();
$("#FrontDeskDesc").show();
});
$("#area3").click(function() {
$(".extra").hide();
$("#LoungeDesc").show();
});
$("#area4").click(function() {
$(".extra").hide();
$("#StudyDesc").show();
});
});
I made the example working so you can copy/paste as you please.
Also, I added the following:
var position = $("#IkesDesc").position();
scroll(0,position.top);
This is a really cool trick that will scroll to the div that just appeared such that the user actually notices something changed (I kind of miss that in your current site).
You can check it as a working example HERE.
I hope that helped you out!
Good luck!
Related
I have an HTML where I need to add copyrights text at the bottom of the page but I need to add that text on another image. Here is my div which I added:
<div class="copy-rights">
<img src="https://s30.postimg.org/ws4b9bff5/copyrights.png" />
<p>
©THE NORTHMAN COMPANY . 2017 . ALL RIGHTS RESERVED
</p>
</div>
I have created this jsfiddle in which I have added copy-rights div at the bottom of the page but somehow in my jsfiddle I see lot of white spaces between my copyrights div and the bottom page so I am not able to put an image first and then copyrights text on top of it properly.
My copy-rights div is getting messed up and that copyrights image is also messed up in my jsfiddle.
Technically it should be like this: https://s12.postimg.org/s70kwke59/copyright-image.png
What wrong I have done?
There seemed to be many mistakes in your code that were throwing out the layout.
When i amended the errors, the background was gray in parts and black in others. If this was not what you are aiming for, it should be easy enough to change now.
I didn't fix everything, but i did a few things. Your footer issue fixed anyway. There seems to be a problem in the left sidebar that was happened while other things fell into place. I'm sure you can fix it with a bit of margin-top or something, I didn't look at it closely.
Do review the changes in the css. You've said you're a beginner; it's a good way to learn.
Fiddle
Happy coding!
EDIT: Yaha! (fix i took out top/left/bottom etc positions and some padding) still might need a tweak til you're happy with it.. Preview
Paudel is right you can just set background: grey; and it will look the same.
Otherwise you will need to set wrapped div to be relative and the text element absolute. Something like:
.content {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
Regards
Make the picture a background-image
HTML:
<div class="copy-rights">
<p>
©THE NORTHMAN COMPANY . 2017 . ALL RIGHTS RESERVED
</p>
</div>
CSS:
.copy-rights {
background-image: url('https://s30.postimg.org/ws4b9bff5/copyrights.png');
}
Update:
Since the image is just a grey area, background color can be applied as well:
.copy-rights {
background-color: grey;
}
as described in the title I would like to add a class to the parent element of one element if I have several of the parents.
To explain it in more detail what I mean, I'll give you a quick overview of the initial situation.
The markup:
<div class="box">
<h3>Title</h3>
<p>Some text</p>
<span class="iconfont more"></span>
<div class="slide">
<p>some more text</p>
<span class="iconfont close"></span>
</div>
</div>
As you see I've created a div "box" with some content, a span and also another div "slide" with some content and a span too.
The CSS:
.box {
width: 300px;
height: 500px;
position: relative;
}
.slide {
width: 300px;
height: 500px;
position: absolute;
top: -500px;
left: 0;
transition: all 500 ease-in-out
}
Let's add a bit of styling. The divs now have a width, height and position plus the slide box has received a transition to make the hole thing smooth. You may already know where the journey will end.
So let's do it by bringing up a new player:
.box.slided .slide {
top: 0;
}
For now the rest is pure routine. Add/remove the class .slided to .box by clicking the span. It works fantastic and everyone is happy except me. Because what if I have more of these boxes? Of course using IDs instead of classes to make them unique will solve this too. But what if I don't know how many of them I'll have? And that's exactly the point.
How can I add or remove the class .slided to exact this div.box that contains the span I'm clicking on?
Thanks for your help
Edit: code I've tried
$('div span').stop().click(function(event) {
$('box').addClass('slided');
});
Use $(this) and closest() to traverse the DOM in a relative fashion:
$('.more').click(function () {
$(this).closest('.box').toggleClass('slid');
});
Demo
Note that I've added a negative z-index to your slider div to prevent it from covering the 'more' link, rendering it inaccessible. This is probably not a viable production solution.
Here's an updated version with the transition working properly.
You can find your closest parent that matches your selector like this:
$('div span').stop().click(function(event) {
$(this).closest('.box').addClass('slided');
});
This code will now find its box parent in the context of the span that was clicked.
The issue is at: http://www.tenyeartwilight.com/
There is a jQuery slideToggle function on the second paragraph of the main section of the page (which is just a sandbox for me to learn). It works, but the enclosed text shifts from a left-align to a center-align and I can't figure out how and why, and I know this has got to be simple. The background corners change also, and I am not sure what's getting inherited/"de-herited".
I don't mind cruelty as long as I understand the solution. Thanks.
p.s. - the text is an excerpt copied from Inside the Microsoft Build Engine: MSBuild and Team Foundation Build by Sayed Ibrahim Hashimi and William Bartholomew.
EDIT: My web programming level should be pretty obvious from my question. I understand the broad strokes, but am still breaking down the details.
It is not only centered when it collapse. It is centered all the time. The reason why it looks like its centered is because the second paragraph got covered by left menu.
when it collapse, jQuery set the width of the second paragraph to a right amount which is just wide enough to show the left side of the ul.
Add this css to your code to see what i mean.
#nav{
opacity: 0.5;
}
EDIT: Responsive css and restructure for better readability
Move footer out of section. It's easier to manage and make scene to ours who read your code.So inside <body>you have
<div id="header"></div>
<div id="nav"></div>
<div id="section"></div>
<div id="footer"></div>
on the same level
Then in css you will have
#nav
{
width: 18%;
padding: 1%;
float: left
}
#section
{
width: 78%;
padding: 1%;
float: right;
}
I am trying to do a simple fixed-while-scrolling with ScrollToFixed, but I have encountered some weird behavior
I have prepared a jsfiddle that shows the following problems:
html:
<div class="row-fluid">
<div id="car_left_col" class="span2">left</div>
<div id="car_center" class="span8">
<div class="car_main thumbnail">
<div class="car_cover">
<img alt="" src="http://www.autopulze.com/wp-content/uploads/2012/07/Rolls-Royce-Silver-Ghost-the-Best-Car-in-the-World.jpg">
</div>
<hr>
<div class="car_page_creator"></div>
</div>
<div class="car_talk">here are the comments for the car</div>
</div>
<div id="car_right_col" class="span2">
<div class="car_vote test_fixed">I should not move</div>
</div>
<div class="long"></div>
css:
.long {
height: 10000px;
}
#car_right_col {
position: relative;
}
.car_main {
position: relative;
padding: 0;
}
.car_cover {
width: 100%;
position: relative;
}
.car_cover img {
width: 100%;
}
.test_fixed {
position: static;
}
.car_vote {
position: relative;
}
js:
$(document).ready(function () {
$('.test_fixed').scrollToFixed({
marginTop: 45,
limit: $('.car_page_creator').offset().top
});
});
when scrolling all the way down, notice a horizontal scroll bar, stretching the page ridiculously to the right
I assume this has to do with the first issue, the item to be fixed, .test-fixed, has a really big left property when scrolled down
when scrolling up (from all the way down) by click and holding the scrollbar, once it reaches the point of fixing the item, it just erratically
I think that my html and css is pretty much standard with nothing special.. Is this behavior due to my code or bugs in the plugin?
I've updated your fiddle for you:
http://jsfiddle.net/kspA8/17/embedded/result/
.test_fixed {
position: static;
left: auto !important;
}
Applying auto left property to your context element seems to have fixed it : )
This is my first answer on stackoverflow so I'm not sure if I'm doing this quite right =).
I disabled the javascript you used to make the 'I should not move'-div stick to the right and 45px from the top. You can easily do this with css only. Use position fixed and give the div a margin top.
The second problem was you were trying to fix the div's child. The parent was still positioned relative.
Replace the original #car_right_col with this piece of code. Hope it works for ya!
#car_right_col {
margin-top:45px;
position: fixed;
right:0px;
}
Edit: If I just paste the modified fiddle url will it work? =) http://jsfiddle.net/kspA8/16/
Edit2: I just checked out the ScrollToFixed plugin demo. Seems you might need a different answer after all.. Sorry!
I've opened an issue in github, and a I must say that response was quick
the solution was to remove the element .test-fixed outside of the right column and make it the same level as the center div
I have a problem when focusing on invisible elements. Markup:
<div id="outer">
<div id="inner" style="top: 0;">
<div class="group" style="background: red;">X</div>
<div class="group" style="background: blue;">Y</div>
<div class="group" style="background: green;">Z</div>
</div>
</div>
<button onclick="document.getElementById('inner').style.top = '-182px';">Down</button>
And css:
#outer {
width: 300px;
height: 182px;
overflow: hidden;
background: black;
}
#inner { position: relative; }
.group { width: 300px; height: 182px; background: red;}
When I press 'down' button inner's style become 'top: -182px', which functionally just shows another group of items. And component basically works as a vertical group slider. Everything works perfectly until I'm using 'Tab'. Just before slider show next group browser automatically shifts inner div without changing any attributes on it.
Is there any change to get offset made by browser from DOM or anywhere else? I know that scrolling on focus is default browser functionality so I am not going to fight with browsers and I am pretty sure I can't disable such scrolling.
I've figured out that browser scrolls before any js code executes. Is there any way to intercept focus event and scroll before browser?
Why not use a bit more JS?
I've forked your JSfiddle to use raw JS, though I would use jQuery to make it much cleaner.
http://jsfiddle.net/bldoron/wMXpt/4/
Basically I would traverse the elements and hide the irrelevant ones explicitly instead of implicitly with css rules.
You need to check if we passed the last node, but you get the picture.
Take a look at this: http://jsfiddle.net/byTLg/8/. It works! Fiddle will explain much more than me )