I have made a simple Javascript on hover effect so when you hover a div the text is then displayed in the div below, but in IE7 only a random few will work such as 1,2,3,4,27,28 and a few others the rest just do not work?
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
function menu (whichMenu,whatState){
if (document.getElementById)
{document.getElementById(whichMenu).style.visibility = whatState;}
else {document[whichMenu].visibility = whatState;}
}
function details(what){
myInfo={
"s1":"Flaunchin",
"s2":"Chimney stack",
"s3":"Ridge",
"s4":"Flashing",
"s5":"Barge board",
"s6":"Dormer",
"s7":"Water tabling",
"s8":"Purlin",
"s9":"Wall Plate",
"s10":"Rafters",
"s11":"Soffit",
"s12":"Insulation",
"s13":"Cold Water Storage Tank",
"s14":"Central Heating Header Tank",
"s15":"Felt and Battens",
"s16":"Slating or Tiling",
"s17":"Hip",
"s18":"Fascia or Eaves",
"s19":"Timber Stud Wall",
"s20":"Floor Joists",
"s21":"Hot Water Cylinder",
"s22":"Overflow Pipe",
"s23":"Cavity Brick or Block Wall",
"s24":"Wall Ties",
"s25":"Quoin Stone",
"s26":"Gutter and Rain Water Pipe",
"s27":"Felt with Stone Chippings on Decking",
"s28":"Fair Faced Brickwork",
"s29":"Damp Proof Course",
"s30":"Hardcore",
"s31":"Reveal",
"s32":"Timber, Concrete or Steel Lintel",
"s33":"Air Brick",
"s34":"Concrete Slab",
"s35":"Gulley with Granting",
"s36":"Soil and Vent Pipe",
"s37":"Manhole",
"s38":"Electricity Main",
"s39":"Solid Wall",
"s40":"Wall Plates on Sleeper Wall",
"s41":"Foul Drain",
"s42a":"Underpinning",
"s42b":"Underpinning",
"s43":"Interceptor Trap",
"s44":"Water Main"
}
detailsBox.innerHTML=myInfo[what]
}
</script>
<style>
body{width:980px;height:100%;margin:auto;margin-top:20px}
#imagebg{background:url(house.png);height:640px;width:715px;margin:auto}
.s1{width:20px;height:10px;margin-left:383px;margin-top:-615px}
.s2{width:20px;height:10px;margin-left:365px;margin-top:21px}
.s3{width:20px;height:10px;margin-left:430px;margin-top:-4px}
.s4{width:20px;height:10px;margin-left:380px;margin-top:12px}
.s5{width:20px;height:10px;margin-left:561px;margin-top:-5px}
.s6{width:20px;height:10px;margin-left:445px;margin-top:27px}
.s7{width:20px;height:10px;margin-left:320px;margin-top:-27px}
.s8{width:20px;height:10px;margin-left:380px;margin-top:30px}
.s9{width:20px;height:10px;margin-left:297px;margin-top:42px}
.s10{width:20px;height:10px;margin-left:355px;margin-top:-44px}
.s11{width:20px;height:10px;margin-left:339px;margin-top:31px}
.s12{width:20px;height:10px;margin-left:410px;margin-top:-37px}
.s13{width:20px;height:10px;margin-left:410px;margin-top:17px}
.s14{width:20px;height:10px;margin-left:452px;margin-top:15px}
.s15{width:20px;height:10px;margin-left:536px;margin-top:-74px}
.s16{width:20px;height:10px;margin-left:585px;margin-top:-29px}
.s17{width:20px;height:10px;margin-left:590px;margin-top:-35px}
.s18{width:20px;height:10px;margin-left:693px;margin-top:70px}
.s19{width:20px;height:10px;margin-left:636px;margin-top:41px}
.s20{width:20px;height:10px;margin-left:655px;margin-top:70px}
.s21{width:20px;height:10px;margin-left:475px;margin-top:-36px}
.s22{width:20px;height:10px;margin-left:448px;margin-top:22px}
.s23{width:20px;height:10px;margin-left:328px;margin-top:-105px}
.s24{width:20px;height:10px;margin-left:311px;margin-top:31px}
.s25{width:20px;height:10px;margin-left:278px;margin-top:-56px}
.s26{width:20px;height:10px;margin-left:267px;margin-top:26px}
.s27{width:20px;height:10px;margin-left:234px;margin-top:-23px}
.s28{width:20px;height:10px;margin-left:214px;margin-top:38px}
.s29{width:20px;height:10px;margin-left:204px;margin-top:43px}
.s30{width:20px;height:10px;margin-left:197px;margin-top:82px}
.s31{width:20px;height:10px;margin-left:300px;margin-top:-99px}
.s32{width:20px;height:10px;margin-left:328px;margin-top:-19px}
.s33{width:20px;height:10px;margin-left:327px;margin-top:60px}
.s34{width:20px;height:10px;margin-left:395px;margin-top:32px}
.s35{width:20px;height:10px;margin-left:423px;margin-top:33px}
.s36{width:20px;height:10px;margin-left:462px;margin-top:-90px}
.s37{width:20px;height:10px;margin-left:539px;margin-top:141px}
.s38{width:20px;height:10px;margin-left:585px;margin-top:-102px}
.s39{width:20px;height:10px;margin-left:589px;margin-top:-64px}
.s40{width:20px;height:10px;margin-left:610px;margin-top:22px}
.s41{width:20px;height:10px;margin-left:634px;margin-top:50px}
.s42a{width:20px;height:10px;margin-left:685px;margin-top:-2px}
.s42b{width:20px;height:10px;margin-left:742px;margin-top:-52px}
.s43{width:20px;height:10px;margin-left:780px;margin-top:-71px}
.s44{width:20px;height:10px;margin-left:723px;margin-top:-59px}
#detailsBox{font-size:25px;margin-top:230px;margin-left:155px;font-weight:bold}
</style>
</head>
<body>
<div id="imagebg"></div>
<div onMouseOver="details('s1')" class="s1"></div>
<div onMouseOver="details('s2')" class="s2"></div>
<div onMouseOver="details('s3')" class="s3"></div>
<div onMouseOver="details('s4')" class="s4"></div>
<div onMouseOver="details('s5')" class="s5"></div>
<div onMouseOver="details('s6')" class="s6"></div>
<div onMouseOver="details('s7')" class="s7"></div>
<div onMouseOver="details('s8')" class="s8"></div>
<div onMouseOver="details('s9')" class="s9"></div>
<div onMouseOver="details('s10')" class="s10"></div>
<div onMouseOver="details('s11')" class="s11"></div>
<div onMouseOver="details('s12')" class="s12"></div>
<div onMouseOver="details('s13')" class="s13"></div>
<div onMouseOver="details('s14')" class="s14"></div>
<div onMouseOver="details('s15')" class="s15"></div>
<div onMouseOver="details('s16')" class="s16"></div>
<div onMouseOver="details('s17')" class="s17"></div>
<div onMouseOver="details('s18')" class="s18"></div>
<div onMouseOver="details('s19')" class="s19"></div>
<div onMouseOver="details('s20')" class="s20"></div>
<div onMouseOver="details('s21')" class="s21"></div>
<div onMouseOver="details('s22')" class="s22"></div>
<div onMouseOver="details('s23')" class="s23"></div>
<div onMouseOver="details('s24')" class="s24"></div>
<div onMouseOver="details('s25')" class="s25"></div>
<div onMouseOver="details('s26')" class="s26"></div>
<div onMouseOver="details('s27')" class="s27"></div>
<div onMouseOver="details('s28')" class="s28"></div>
<div onMouseOver="details('s29')" class="s29"></div>
<div onMouseOver="details('s30')" class="s30"></div>
<div onMouseOver="details('s31')" class="s31"></div>
<div onMouseOver="details('s32')" class="s32"></div>
<div onMouseOver="details('s33')" class="s33"></div>
<div onMouseOver="details('s34')" class="s34"></div>
<div onMouseOver="details('s35')" class="s35"></div>
<div onMouseOver="details('s36')" class="s36"></div>
<div onMouseOver="details('s37')" class="s37"></div>
<div onMouseOver="details('s38')" class="s38"></div>
<div onMouseOver="details('s39')" class="s39"></div>
<div onMouseOver="details('s40')" class="s40"></div>
<div onMouseOver="details('s41')" class="s41"></div>
<div onMouseOver="details('s42a')" class="s42a"></div>
<div onMouseOver="details('s42b')" class="s42b"></div>
<div onMouseOver="details('s43')" class="s43"></div>
<div onMouseOver="details('s44')" class="s44"></div>
<div id="detailsBox">Hover Over the Numbers to Find the Answer</div>
</body>
</html>
Any Help would be great :D
(You can also view it http://cameronmlewis.com/house/)
Sorry, but it took some time figuring out what is going wrong in IE7, but I think I've found your problem. You've been using margin-left and margin-top to reposition automatically aligned images. For most browsers this works fine, but IE up to and including IE7 this is buggy at best. As a result here, the body element is drawn on top of some of the hover DIVs.
If you have IE8+ you can see this by using the Developer Tool . You can do this by pressing F12 after the page is fully loaded, set the browser mode to IF7 and then use the 'Select element by click'-tool (CTRL+B) to try and select the DIVs you created. You will notice that you can only select the elements on top of the body element (those will also change the text on hover).
Best option is to use 'position: absolute;' and 'z-index' if you want to reposition DIVs like this. Also to clean up your CSS I would suggest you do the following:
<style>
.hoverDiv {
height: 10px;
position: absolute;
width: 20px;
z-index: 9999;
}
.s1 {
left: 300px;
top: 10px;
}
.s2 {
left: 350px;
top: 130px;
}
</style>
After which you can make your DIVs like this:
<div class="hoverDiv s1"> </div>
This uses CSS inheritance to clean up your code (less repetition) and makes it a lot easier to do small edits. Furthermore, I would take a look at using some of the DIVs parameters to store your text's, instead of placing them into the JavaScript - but that's up to you.
Related
I am working on a page of mine.
The aim is that when I click on the image of apples, everything except for the rest of my images gets set to a display of none.
Here is my code:
// hideAll() hides everything except the images in the fruits class.
function hideAll() {
let fruit = document.querySelectorAll("div.main div.fruits");
let mainContainer = document.querySelectorAll("div.main");
mainContainer[0].style.display = 'none';
for (i = 0; i < fruit.length; i++) {
fruit[i].style.display = 'block';
//fruit[i].style.setProperty('display', 'block', '!important'); //This did not work
}
}
.fruits {
display: none;
}
img {
width: 100px;
height: 100px;
}
.Categories {
padding: 5px 5px 5px 5px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<h1>Main Page</h1>
<div class="base">
<h2>Fruit Categories</h2>
<div class="some-content">
<p>This page contains some fruit information.</p>
<div class="Categories">
<p>We have apples, bananas, oranges, etc.</p>
</div>
</div>
<img src="https://foodprint.org/wp-content/uploads/2018/10/IMG_3392-e1539129880189.jpg" onclick="hideAll();">
<div class="element-container">
<div class="fruits">
<img src="https://foodprint.org/wp-content/uploads/2018/10/IMG_3392-e1539129880189.jpg">
</div>
<div class="fruits">
<img src="https://foodprint.org/wp-content/uploads/2018/10/imageedit_127_5581342771.jpg">
</div>
<div class="fruits">
<img src="https://i0.wp.com/moodymoons.com/wp-content/uploads/2016/02/img_8986.jpg?fit=4560%2C3000&ssl=1">
</div>
<div class="fruits">
<img src="https://www.naturalhealth365.com/wp-content/uploads/2016/04/blueberries.jpg">
</div>
<div class="fruits">
<img src="https://th.bing.com/th/id/OIP.gBifOTB-F-wBTx3bzYPiGgHaE-?pid=ImgDet&rs=1">
</div>
<div class="fruits">
<img src="https://th.bing.com/th/id/OIP.3yrzbKoKIgyR7eBhHma26AHaGm?pid=ImgDet&rs=1">
</div>
</div>
</div>
</div>
</body>
</html>
Basically, all of the images contained within the div class of fruits (6 images in total) needs to get set to a display of "block". Everything else gets set to a display of none (when the apple image is clicked).
Since there are many divs (and nested divs) within the main class, I thought that I could set the entire main class to a display of none. Then, I could set all of the elements within the fruits class to a display of block. I even tried using the !important keyword within the fruits class to override the effect of setting everything within the main div to none but that did not seem to do the trick.
Is there any way of targeting css for every descendant of a div except for the one specified?
All of the children elements are not visible because their parent is invisible; not because they are inheriting anything, but because the element they are contained in is invisible.
The !important value only applies when you want to disrupt the CSS hierarchy; it has nothing to do with the HTML hierarchy.
In your case, you want to set the display attribute in your loop for each child individually; forget about the parent.
You can do something like this snippet.
Note that I replaced your image src with placeholders since yours weren't showing up for me (and/or might stop showing up at some point).
It's coded such that all images show at the outset, and each time you click one, it'll hide itself and show all others. It's not clear what you're trying to achieve, but this behavior should at least illustrate how you can set it up for your needs.
//capture all fruits into an array variable
let allFruits = [...document.querySelectorAll("#elcon > div.fruits")];
allFruits.forEach((fruit) => {
//add a click listener on each fruit element
fruit.addEventListener("click", () => {
//show all fruits
allFruits.forEach(e => e.style.display = 'block');
//hide the fruit that got clicked
fruit.style.display = 'none';
})
});
img {
width: 100px;
height: 100px;
}
.Categories {
padding: 5px 5px 5px 5px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<h1>Main Page</h1>
<div class="base">
<h2>Fruit Categories</h2>
<div class="some-content">
<p>This page contains some fruit information.</p>
<div class="Categories">
<p>We have apples, bananas, oranges, etc.</p>
</div>
</div>
<div class="element-container" id="elcon">
<div class="fruits">
<img src="https://via.placeholder.com/150/000000">
</div>
<div class="fruits">
<img src="https://via.placeholder.com/150/FF8000">
</div>
<div class="fruits">
<img src="https://via.placeholder.com/150/8F0000">
</div>
<div class="fruits">
<img src="https://via.placeholder.com/150/008000">
</div>
<div class="fruits">
<img src="https://via.placeholder.com/150/00FF00">
</div>
<div class="fruits">
<img src="https://via.placeholder.com/150/0000FF">
</div>
</div>
</div>
</div>
</body>
</html>
I am new to programming so I apologise if my code presentation is not very good or my explanation not very clear. But, what I am trying to achieve is an auto-scroll feature as the content inside the <span> tag expands, so as you can see the function will print <br> and eventually, my <span> will require scrolling, when that happens, I would like to make it scroll automatically to the bottom of the <span> until the function finishes.
<pre><span class="inner-pre" id=code style="height:500px; display: block; overflow: auto; font-size: 16px"></span></pre>
<script>
function print()
{
for (i = 0; i < n; i++)
{
document.getElementById("code").innerHTML += "<br>";
} // for
} // end-function
</script>
I have looked at similar Stack Overflow questions, and I cannot find a solution to what I am trying to achieve. I have tried the following solutions:
document.getElementById('divID').scrollIntoView();
$(divname / .class / #id).focus();
div = document.getElementById('#your_div');
div.scrollTo(0,div.scrollHeight);
But neither worked for me, though, it may be that I might've implemented it wrong.
My HTML code:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading"><h3 align="center">Pseudo Code</h3></div>
<div class="panel-body" style="height:600px;">
<pre><span class="inner-pre" id=code style="height:500px; display: block; overflow: auto; font-size: 16px">code</span></pre>
</div>
</div>
</div>
</div>
</div>
On ollynural.github.io, in the portfolio page i'm trying to simulate a pop-up div giving more information on the project you clicked on. To go back off the pop-up, I've added an ng-click so when you click on the main portfolio-pop-up container, the pop-up is removed.
Is it possible to only have the parts of the portfolio-pop-up div that are exposed (not on the photo nor the description white box) removing the main div once clicked? So you can click freely on the picture and the white box
<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
<div class="row">
<div class="col-xs-12">
<img class="portfolio-image portfolio-image-popup" src="{{portfolioImageClass}}">
</div>
<div class="col-xs-12 pop-up-container">
<div class="pop-up-row">
<div class="col-xs-9" style="background: red">
<h1>
{{portfolioTitle}}
</h1>
<p>
{{portfolioDescription}}
</p>
</div>
<div class="col-xs-3" style="background: cyan">
Click me
<div ng-repeat="tech in portfolioTech">
{{tech}}
</div>
</div>
</div>
</div>
</div>
</div>
JS
$scope.losePortfolioFocus= function() {
angular.element('.portfolio-pop-up').css("display", "none");
}
CSS
.portfolio-pop-up {
display: none;
position: absolute;
width: 100%;
height: 100%;
/* color with alpha transparency */
background-color: rgba(0, 0, 0, 0.70);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Any help would be appreciated, can post more css or code if needed
You can stop the propagation of the click event on the element that wraps the pop-up's content like this:
<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
<div class="row" ng-click="$event.stopPropagation()">
...
</div>
</div>
This way the clicks inside the popup will not trigger the losePortfolioFocus() handler.
I suggest you crawl up the event chain from you event' target and check whether your pop-up-container is in there. This way, you'll have a way to distinguish click in the pop-up or out of it.
Im trying to create a social website which has a chat sidebar, which is just like Facebook. It has a timeline with posts in one section and a chat sidebar.
I have made the chat <div> to be fixed just like Facebook chat.
Now when the total height of elements within the chat sidebar becomes more than the page height, scrollbar appears. When i scroll through it and reach the end of it, if i scroll more, now it scrolls the posts on the timeline.
So what i want to achieve is, to make chat sidebar scroll irrelative to the timeline. to make this crystal clear, i want them to scroll separately, so if i scroll chats and it reaches the bottom, if my pointer is still on the chat sidebar and i scroll nothing should happen.
I prefer to find a way without the use of jQuery. but if its not achievable with css, i would appreciate any help on javascript as well.
Great Example: Facebook
Sample from my html
<div class="outer-container">
<div class="timeline">
<div class="contents">
<div class="header"><p>Timeline</p></div>
<div class="post-items">
<div class="post">
<div class="avatar">
<div class="frame"><img src="blabla.img" /></div>
</div>
<div class="post-block">
<div class="post-header"><p>Some Header</p></div>
<div class="post-contents"><p>Some contents</p></div>
<div class="post-footer"><p>Some footer</p></div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar right-sidebar">
<div class="chat-list">
<ul class="friends">
<div class="header"><p>Friends</p></div>
<li>
<a class="chat-item">
<div class="avatar">
<div class="frame"><img src="blabla.img" /></div>
</div>
<span class="name">James Hetfield</span>
<span class="ic ic-message"></span></a>
</li>
</ul>
</div>
</div>
</div>
Put your timeline in the timeline div and chatbar inside chatbar div. Note in the javascript I have overridden the natural behaviour of scrolling. So, when your mouse is over chatbar normal scrolling wouldn't occur.
Update: Whenever the mouse is scrolled while the cursor is over the div manually update the scrolltop property.
JSFiddle : Link
<html>
<head>
<style type="text/css">
#body{
width: 95%;
margin: auto;
}
#timeline{
width: 75%;
display: inline-block;
overflow-y: scroll;
margin: auto;
}
#chatbar{
position: fixed;
width: 15%;
display: inline-block;
max-height: 100%;
margin: auto;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="body">
<div id="timeline">
</div>
<div id="chatbar" class="scrollable">
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$( '.scrollable' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
e.preventDefault();
});
</script>
</body>
</html>
I am making a web app. I have created 25 divs.
I have Used jquery fadeIn() by which divs are gradually made and displayed one after another on screen.
But problem is that when 25 divs have been created, scroll is created due to which first 4 divs can be seen but the remaining can't be seen until user scroll the page.
I want that as one by one div is created, the page should automatically scroll to the div recently created and so on this process should be continued until the last div is created.
You can use
$('html,body').scrollTop($(".answer.visible:last").offset().top);
$(function() {
$(".answer").hide();
$('#demo').click(function(e) {
var _div = $('.answer[style*="display: none"]:first');
if (_div.length) {
_div.fadeIn();
$('html,body').animate({
scrollTop: _div.offset().top
},
'slow');
} else {
$(this).text('Done..!');
}
});
});
#demo {
position: fixed;
bottom: 0px;
left: 0px;
}
.answer {
width: 100%;
height: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Click here</button>
<div class="answer">1</div>
<div class="answer">2</div>
<div class="answer">3</div>
<div class="answer">4</div>
<div class="answer">5</div>
<div class="answer">6</div>
<div class="answer">7</div>
<div class="answer">8</div>
<div class="answer">9</div>
<div class="answer">10</div>
<div class="answer">11</div>
<div class="answer">12</div>
<div class="answer">13</div>
<div class="answer">14</div>
<div class="answer">15</div>
<div class="answer">16</div>
<div class="answer">17</div>
<div class="answer">18</div>
<div class="answer">19</div>
<div class="answer">20</div>
<div class="answer">21</div>
<div class="answer">22</div>
<div class="answer">23</div>
<div class="answer">24</div>
<div class="answer">25</div>
I think this looks pretty cool when we use slideDown+scrollTop. Check fiddle
Documentations
To get the coordinates
http://api.jquery.com/offset/
Set vertical position of the scroll bar
https://api.jquery.com/scrollTop/
Set horizontal position of the scroll bar
https://api.jquery.com/scrollleft/
I found this link here
smooth auto scroll by using javascript
Using this you could create something like this here:
http://jsfiddle.net/mrc0sp5j/
The main point is, that you create a scrolling-function using
window.scrollBy or window.scrollTo
http://www.w3schools.com/jsref/met_win_scrollto.asp
With jQuery .last or .eq you can specify which element you want to scroll to
$(".mydivobjects").eq(x).position().top
Hope this helps
cheers