I have a very odd situation, I have looked all over and cannot find someone with a similar situation, and in my eyes, I don't see why this inst working. I'm trying to make a simple tab list with jQuery:
I have a JS function as follows:
function changeWindow(contentId) {
$(".tabs").css("border-bottom","thin solid black");
$("#" + contentId + "Tab").css("border-bottom","thick solid white");
$(".content").hide();
$("#" + contentId).show();
$("#" + contentId + "Head").show(); //when I comment this line, all works well.
}
My html is:
<div id="header">
<div id="tabs">
<span onClick="changeWindow('browse')" id="browseTab" class="tabs"> Browse </span>
<span onClick="changeWindow('collection')" id="collectionTab" class="tabs"> My Collection </span>
<span onClick="changeWindow('play')" id="playTab" class="tabs"> Play! </span>
</div>
<div id="contentHeads">
<div id="browseHead" class="content">
some Html
</div>
<div id="collectionHead" class="content">
some Html
</div>
<div id="playHead" class="content">
some Html
</div>
</div>
</div>
<div id="gameField">
<div id="browse" class="content">
some Html
</div>
<div id="collection" class="content">
some Html
</div>
<div id="play" class="content">
some Html
</div>
</div>
I dont think it matters much, but here is my CSS(I left some out):
#tabs
{
position: absolute;
top: 10px;
left: 10px;
border-bottom: medium solid black;
}
.tabs
{
border: thin solid black;
padding-left: 50px;
padding-right: 50px;
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
}
.content
{
position: relative;
height: 100%;
overflow: hidden;
}
The curious thing is, this function will run once(i.e i can click a tab) and everything works perfect. But after i click a tab, the CSS property cursor: pointer; no longer did anything, and the JS function no longer works. I have tested and other functions still run when called, just not this one. After a bit of testing, I came to the conclusion that it is because of the last line in the JS function. When I comment it all works well(except that the Heads don't show). I dont understand what is going on, i think it is an HTML problom, but have no clue. Does anyone know why this may be happening?
Thanks in advance.
The problem is that your "content" blocks come after the menu in the document, so when they're visible they cover the menu up.
Here is a fixed jsfiddle to demonstrate.
I updated the CSS:
.content {
position: relative;
height: 100%;
overflow: hidden;
margin-top: 40px;
display: none;
}
I also added CSS to move the "gameField" stuff out of the way.
It can be tricky to diagnose problems like this, but the developer tools ("inspector") generally make it a lot easier.
Related
I have inherited somebody else's problem. The HTML is all DIVs with floats, displays and positioning tweaks. The one thing I cannot change is the structured of the HTML DIVs. Nor do I wish to add any new javascript libraries. But I can add all the CSS I need to the existing DIVs.
Currently 3 DIVs are embedded as:
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow">
<DIV> 2 </DIV>
<DIV> 3 </DIV>
</DIV>
Take a look at the graphic below. The problem with this is that as DIV1 grows down, the DIV3 gets bumped down. I wish to keep DIV3 fully justified from the top to bottom (as if STRETCH).
Without getting into how the current code combines DISPLAYS, FLOATS, and POSITIONING -- I think I need to erase all the CSS and replace with some FLEXBOX. But I cannot seem to get the right combination of FLEX properties to make DIV3 behave to stretch (instead of getting bumped down).
Fortunately, this only has to work for Chrome on Desktop (no mobile nor other browsers).
There you go IF width of div 3 is known and fixed value:
https://codepen.io/AugustinF/pen/qYBpmR
.wrapper {
position: relative;
border: 2px solid black;
}
#firstrow {
height: 100px;
margin-right: 200px;
background: green;
}
#secondrow {
}
#div2 {
float:left;
background: blue;
}
#div3 {
width: 200px;
position: absolute;
top:0;
right:0;
height: 100%;
background: red;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
HTML:
<div class="wrapper clearfix">
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow clearfix">
<DIV id="div2"> 2 </DIV>
<DIV id="div3"> 3 </DIV>
</DIV>
</div>
Using #Pete solution you can modify the HTML structure using javascript by placing this code at the end of the body tag:
<script>
document.getElementById('firstrow').appendChild(
document.getElementById('div2')
);
</script>
I am trying to make the home div disappear and the about page appear but for some reason I can't get it to work. it is for a navigation bar and if I can get one working I can get them all so pleas help. I need home to disappear when I press the about paragraph and make the about div appear. I hope someone can help me I have googled a lot and it just won't work.
// page movement
function goA() {
document.getElementsByClassName("home").style.display = "none";
document.getElementsByClassName("about").style.display = "block";
}
.home {
background: #4f4f4f;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
position: absolute;
}
.backgroundpic {
background-image: url("http://cdn.wallpapersafari.com/58/58/hlVdYW.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 93.7%;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 30px;
margin-top: 30px;
overflow: hidden;
}
.about {
font-family: Open sans;
color: #fff;
font-size: 150%;
text-align: left;
display: inline-block;
cursor: default;
}
.about a {
text-decoration: none;
color: #fff;
border-bottom: 2px solid rgba(225, 225, 225, .7);
}
.about {
font-family: Open sans;
color: #fff;
font-size: 150%;
cursor: default;
position: relative;
padding: 0;
margin-left: 50%;
margin-right: 10%;
margin-top: 18.4%;
text-align: left;
display: none;
}
<!-- home div -->
<div class="home">
<div class="backgroundpic">
<div class="picgradiant">
<!-- navigation button -->
<div class="navigation">
<div class="navloc">
<p class="loc" onclick="goW()">WebDesign</p>
<p class="loc" onclick="goGr()">Photography</p>
<p class="loc" onclick="goS()">SketchUp</p>
<p class="loc" onclick="goSh()">Photoshop</p>
<p class="loc" onclick="goA()">About</p>
<p class="loc" onclick="goH()">Home</p>
</div>
<div class="stripes">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
<!-- text about myself -->
<div class="totalheader">
<div class="headtext">
<p class="header1">Sup, I'm Lars.</p>
<p class="text1">I do things!</p>
</div>
<p class="buttonhead">click to lear more</p>
</div>
</div>
</div>
</div>
<!-- about div -->
<div class="about">
<p>I like to explore different programs and try out as many things as I can. I do this so I can make an informed, good and fun career choice! A lot of projects start with me and my friend talking and getting an idea. Eventually we try to make it happen,
but sometimes help altogether and sometimes us work together. my goal at the moment is the become a game developer, but I am also interested in game design and internet security. I am not sure what the future holds for me, but in the end, I hope that
I'll have a fun job. If you want more info you can contact me at: Larsmulleneers#hotmail.nl </p>
Using
document.getElementsByClassName
returns an array not element so you can't change the element without the index number
try this
document.getElementsByClassName('home')[0].style.display = 'none';
document.getElementsByClassName('about')[0].style.display = 'block'
There can be more than one element using the same className and document.getElementsByClassName return more than one results which is an array.
Either you can access the very first element or use id to make them unique.
Check the example below which I created for you:
#home {
background: #4f4f4f;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
position: absolute;
}
.backgroundpic {
background-image: url("http://cdn.wallpapersafari.com/58/58/hlVdYW.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 93.7%;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 30px;
margin-top: 30px;
overflow: hidden;
}
<body>
<li onclick="aoG()">Home</li>
<li onclick="goA()">About</li>
<!-- home div -->
<div id="home">
<div class="backgroundpic">
<div class="picgradiant">
<!-- navigation button -->
<div class="navigation" onclick="rotatebar(this)">
<div class="navloc">
<p class="loc" onclick="goW()">WebDesign</p>
<p class="loc" onclick="goGr()">Photography</p>
<p class="loc" onclick="goS()">SketchUp</p>
<p class="loc" onclick="goSh()">Photoshop</p>
<p class="loc" onclick="goA()">About</p>
<p class="loc" onclick="goH()">Home</p>
</div>
<div class="stripes">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
<!-- text about myself -->
<div class="totalheader">
<div class="headtext">
<p class="header1">Sup, I'm Lars.</p>
<p class="text1">I do things!</p>
</div>
<p class="buttonhead">click to lear more</p>
</div>
</div>
</div>
</div>
<!-- about div -->
<div id="about">
<p>I like to explore different programs and try out as many things as I can. I do this so I can make an informed, good and fun career choice! A lot of projects start with me and my friend talking and getting an idea. Eventually we try to make it happen,
but sometimes help altogether and sometimes us work together. my goal at the moment is the become a game developer, but I am also interested in game design and internet security. I am not sure what the future holds for me, but in the end, I hope
that I'll have a fun job. If you want more info you can contact me at: Larsmulleneers#hotmail.nl </p>
</div>
<script>
function goA(){
document.getElementById("home").style.display = "none";
document.getElementById("about").style.display = "block";
}
function aoG(){
document.getElementById("home").style.display = "block";
document.getElementById("about").style.display = "none";
}
</script>
</body>
I have a container div in which everything is editable
<div data-editable data-name="main-content">
</div>
Which works fine as expected, but inside of that div there are multiple sections which all can be edited as well (due to the parent div having the editable tag) but I want to have a section (a p tag) that isn't editable whilst all the other content in that div is editable.
Apart from removing data-editable from the parent div and adding it to each individual p tag (to which there could be hundreds or even thousands) how do I block just one p tag from being editable?
I would think there is a tag like data-none-editable but I can't find anything in the docs unless I'm missing the obvious.
EDIT:
For clarification the library I'm using (as per the title) is ContentTools which can be found here: http://getcontenttools.com/
You can use this if you still face problem please let me know
.first{
height: 300px;
border:1px solid red;
}
.wrapper{
width: 500px;
height: 300px;
position: relative;
}
.second{
background-color: green;
width:200px;
height: 100px;
left: 0px;
right: 0px;
top: 10px;
margin-left: auto;
margin-right: auto;
position: absolute;
}
<div class="wrapper">
<div contenteditable="true" data-name="main-content" class="first">
</div>
<div contenteditable="false" class="second">
</div>
</div>
So my question is how do I make a div push down everything that comes after it, even if the elements that come after have a fixed positions.
Let me explain the scenario:
I have the following structure:
<body>
<div class="top_menu">
</div>
<div class="content">
</div>
</body>
Where .top_menu has a position:fixed; and top:0;
Now using JavaScript I insert a new div right after <body> and wrap the rest in another div to end up with something that looks like this.
<body>
<div id="notice_bar">
</div>
<div id="wrap">
<div class="top_menu">
</div>
<div class="content">
</div>
</div>
</body>
Now is there a way to make the #notice_bar div always push down the #wrap div with all its content?
Changing the position:fixed; attribute of .top_menu is not an option because this script I’m working on should work on any given website.
I’m really running out of ideas here so any tips will be greatly appreciated. Thanks!
EDIT: Here is the specific scenario were I'm working on right now in case anyone feels generous enough to play arroudn with it :) http://mirlostudio.com/choeducators
If you want the notice bar to remain at the top, while the menu scrolls with the page you could use a little jQuery/javascript to toggle a class that adds fixed positioning to the menu:
Working Example
$(window).scroll(function() {
$('.top_menu').toggleClass('scrolling', $(window).scrollTop() > $('#wrap').offset().top);
});
.top_menu {
height: 20px;
width: 100%;
background: blue;
}
.content {
position: relative;
height: 600px;
background: grey;
}
.scrolling {
position: fixed;
top: 0px;
right: 8px;
left: 8px;
width: auto;
z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notice_bar">Notice Bar</div>
<div id="wrap">
<div class="top_menu">Top Menu</div>
<div class="content">Content</div>
</div>
If you set the .wrap container to position: relative; - all elements inside the .wrap container that are absolutely positioned will be moved together with their parent container.
I need advice on the following issue:
We are using wordpress as backend for a website and a theme that comes with a slider. I use that slider with some css to let divs slide up and show hidden content on mouseover (divs are displayed in front of a background image). This works great so far after searching for it here in stackoverflow.
What I would need now is a functionality that changes the image of the slider on mouseover of a div that is inside the slider-div.
HTML looks like this (extremely simplified):
<div class="ls-wp-fullwidth-container" style="height: 692px;">
<div class="ls-wp-fullwidth-helper" style="height: 692px; width: 1383px; left: 0px;">
<div id="layerslider_3" class="ls-wp-container ls-container ls-fullwidth" style="margin: 0px auto; visibility: visible; width: 1383px; height: 691.5px;">
<div class="ls-webkit-hack">
</div>
<div class="ls-inner" style="width: 1383px; height: 692px;">
<div class="ls-layer ls-active" style="left: auto; right: 0px; top: 0px; bottom: auto; width: 1383px; height: 692px; display: none; visibility: visible;">
<img src="http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Zürich.jpg" class="ls-bg" alt="Slide background" style="padding: 0px; border-width: 0px; width: 1660px; height: 922px; margin-left: -830px; margin-top: -461px;">
<div class="ls-s-1 Highlight1" style="position: absolute; color: rgb(0, 111, 0); border-radius: 20px; white-space: nowrap; opacity: 1; transform: rotate(0deg) scale(1, 1); display: block; visibility: visible; margin-left: 0px; margin-top: 0px; width: 253.55px; height: auto; font-size: 23.05px; line-height: 23.05px; padding: 0px; border-width: 0px; left: 138.3px; top: 507.1px; background: rgb(255, 255, 255);">
<div id="parent">
<center>
<br>
<br>
<h1>Siebdruck</h1>
<ul>
<li>Content</li>
</ul>
</center>
<br>
<br>
<div id="hover-content">
<center>
<ul>
<li>Content shown on hover</li>
</ul>
<br>
<br>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I want to do now is to change the image within the
<div class="ls-layer ls-active>
<img src="...">
</div>"
I figured out this would only be possible by using javascript so I tried the following:
Using this code in a header file:
var elem = document.getElementById("parent");
elem.addEventListener("mouseover",mouseOver);
elem.addEventListener("mouseout",mouseOut);
function mouseOver() {
document.getElementByClassName("ls-layer ls- active").style.backgroundImage="url(http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/04/slider_stockfoto_3.jpg)";
}
function mouseOut() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Z%C3%BCrich.jpg)";
}
Didn't work, so I tried this:
function MouseIn() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(img/http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/04/slider_stockfoto_3.jpg) no-repeat";
}
function MouseOut() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(img/http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Z%C3%BCrich.jpg) no-repeat";
}
Didn't work as well, so I messed around with names and ids but couldn't figure out what I am doing wrong.
So, long story short: Is it possible to change the image within the structure stated above (<div class="ls-layer ls-active><img src="..."></div>") when hovering <div id="parent"></div>? And if so, what am I obviously doing wrong?
As mentioned before, transitions created using css are working perfectly fine...
I hope you can help me, I'm growing more and more desperate about this.
Just try this:
$("#parent").on({
"mouseover" : function() {
$( ".ls-bg" ).attr( "src", "http://placehold.it/350x150" );
},
"mouseout" : function() {
$( ".ls-bg" ).attr( "src", "http://placehold.it/950x150" );
}
});
HTML:
<div id="parent">
<img src="http://placehold.it/950x150" class="ls-bg" alt="Slide background">
</div>
UPDATE ---
Looking at your question I modified my code. I think this is what you want:
JSFIDDLE