Button not clicking inside Fixed position DIV? - javascript

I am facing some issues due to the fixed position div at the footer.
The footer bar css styles is shown below:
.footerbar{
padding-bottom: 3px;
background-color: #05A3AD;
bottom: 100px;
height: 45px;
left: 0px;
position: fixed !important;
text-align: center;
width: 100%;
z-index: 101;
}
The issue is, button is not clicking when it is placed inside of fixed div.
FYI, the button is clickable or working only at IE with the above style and not working at any other browsers.
i.e.)
<div class="footerbar">
<input type='button' id='somebtn'/>
</div>
The somebtn is not clicking inside of fixed div. When I removed the fixed position and changed the bottom from 100px to 0px, the button is clicking and works fine.
I'm struggling at this point.
Kindly advice me on the issue. Thanks in advance.

Its working fine,
You need to close the div properly, use "/" to close the div and
Remove "." (dot) from HTML code ie., <div class=".footerbar">
CSS:
<div class="footerbar">
<input type='button' id='somebtn' />
</div>
Demo

Works perfectly fine in this fiddle. Just changed the class name from ".footerbar" to "footerbar" and close the div properly!
<div class="footerbar">
<input type='button' id='somebtn' value="some button"/>
</div> //this needs to be corrected!

Related

Working with interactive-background.js

I was trying to get a parallax effect on my website's landing page. I used the interactive_bg.js plugin and working backwards from the demo tutorial I was finally able to get the picture I want with the desired effect.
Here's my code:
HTML -
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
</body>
CSS -
html {
height: 100%;
}
body {
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper { // this class isn't really needed but I thought it may help when putting other elements atop this div.
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.bg {
position: absolute;
min-height: 100% !important;
width: 100%;
z-index: 0;
}
.ibg-bg {
position: absolute;
}
Js -
$(document).ready(function(){
$(".bg").interactive_bg({
strength: 20,
scale: 1.00,
contain: false,
wrapContent: true
});
});
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
I reverse engineered the tutorial files to find this code.
Now the problem is, anything that I put into the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> messes up the picture. Any div I want to put after the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div doesn't even show up on the screen but is rather behind the background image.
How do I put text and other divs on the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div and more content after that div ends?
I have tried z-index and positioning (by looking at the code from the tutorial). It doesn't seem to work.
Also, the CSS only works when I put it in a style tag inside the <head> of the HTML. If I put the CSS in a separate file it doesn't work.
(I did link the CSS to the HTML correctly)
P.S refer to the tutorial I linked above, it'll get you an idea.
UPDATE:
I made some changes to the HTML and now I have text over the image. And the text isn't moving anymore but adds a white space on top. I tried margin but it didn't remove the white space. I still can't add anything below the image.
HTML-
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
<div class="main"> <h1> SOME TEXT </h1></div>
</body>
CSS -
#main{
position: relative;
}
Did you see the demo? http://www.thepetedesign.com/demos/interactive_bg_demo.html
wrapper div will take all the space available, width 100% and height 100%.
wrapper div holds all the content, position absolute.
ibg-bg div is just holds the background image and its not intended to have content inside, position absolute makes easy to put content over it; no need for z-index.
Any other div inside wrapper div and after ibg-bg div will show on top.
How do you put text over the background?
As I said before, put that content inside the wrapper div and after the ib-bg div.
How do you put text or more content after that div?
Add your new content below wrapper div and start playing with css properties to adapt the demo to your preferences.
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
<!-- You need this next div -->
<div class="ibg-bg"></div>
<div>This will appear over your background</div>
</div>
<div>This will appear below your background</div>
</body>
[Edit]
CSS Copied from demo.
#main {
position:relative;
float:left;
width:100%;
margin:0 auto;
}
[/edit]
After pondering around for a while it turned out to be a JS error. I had done a mistake in javascript while copying the script for the plugin execution.
Shout-out to #Triby for helping me out with the CSS, though that is a different thing and I will state it in another question.
Here's the working JS -
$(document).ready(function(){
$(".bg").interactive_bg({
scale: 1.05,
strength: 25,
animationSpeed: "150ms"
})
})
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})

html javascript having 2 div's side by side

i've got 2 div's, one to display a map and the other form-horizontal to display textboxes. currently the map is showing at the top of the page and the textboxes at the bottom. is it possible to display the textboxes at the left and the map right beside in to the right?
<div itemprop="map" id="googleMap" style="height:400px;width:100%;"></div>
<div class="form-horizontal"></div>
Without anymore CSS that you have used, all I can say is that the CSS property, display:inline-block;, should work on these elements to make them display on the same line.
Make sure you remove the width:100%; property from the first div, too.
You can use float:
CSS:
#googleMap {
float: right;
width: 50%;
}
.form-horizontal {
float: left;
width: 50%;
}
HTML:
<div itemprop="map" id="googleMap"></div>
<div class="form-horizontal"></div>

width: auto property not being respected with position: relative

I'm currently trying to style a dropdown menu, but I'm running into some issues. The biggest one is that the dropdown elements don't seem to be exceed the size of their parent object when the css for the dropdown is set to relative.
(Had to block out the search results, sorry).
It seems to work on fixed, but only in Firefox, Chrome's dropdowns are all off.
So I think I need one of two solutions:
Fixing the width issue and keeping the position: relative
Fixing the offset issue that occurs ONLY in chrome, and setting the position: fixed attribute.
HTML:
<div id="node">
<div id="nodebar">
<input type="text" id="nodetext" placeholder="Enter a node" name="nodetext" value="">
<div id="img-container">
<img src="styles/magnifyingglass.png" id="img" alt="" />
</div>
</div>
<div id="nodebr"></div>
<div id="noderesults">
<div id="nodetruncated"><span class="truncated">Truncated search results..</span></div>
</div>
</div>
CSS
#searchresults, #noderesults, #roadmapresults, #intersectnoderesults {
max-width: 1000px;
background: #2E3C3F;
width:auto;
height: 0px;
padding: 0;
border: none;
position: relative;
z-index: 3; /*So that the dropdown stays infront of the forms*/
}
Would anyone know how I could go about fixing this?
I ended up just fixing this by breaking down the CSS into one category for each one of the fields, set the position property to fixed, and scaled the css "top" property so that the results would fit for each of the search fields.

CSS text setting

This is my code jsfiddle. I have three text fields. headline1Txt, headline2Txt and headline3Txt. Right now it is working fine but if i change my headline1Txt to Vintage Lace Turquoise Dress. headline2Txt to SAle Price $135 and headline3Txt to Reg:$50 then my text allignment is overlapping each other and i want my text to appear like this
.
Can anyone tell me what i am doing wrong here?
<div id="mainContainer">
<div id="logo">
<img id="Img1" src="http://i.share.pho.to/cc9794da_o.png" width="50px" height="50px"/>
</div>
<div id="images">
<img id="introImg" src="http://i.share.pho.to/ebe3afc7_o.png"/>
</div>
<div id="headlineText">
<p id="headline1Txt" >Striped Bag</p><br />
<p id="headline2Txt" >$14</p><br />
<p id="headline3Txt" >Sale $25</p><br />
</div>
<div id="ctaBtn">
<button class="btn btn-primary" type="button">SHOP NOW</button>
</div>
</div>
Thanks
The css can certainly be cleaned up. I would try to avoid using absolute positioning as much as possible because it is not as easy to maintain or make changes. In your example increasing the text length of the headlines does not shift the other headlines down, because they are absolutely positioned to stay where they are.
I tried to leave as much of your code as intact as possible and I only made changes to the css:
http://jsfiddle.net/fAsNt/
The main thing I changed was the positioning of the headlines and added a width so they wouldn't overlap with the image:
#headline1Txt, #headline2Txt, #headline3Txt
{
position: relative;
margin: 0px 2px;
left: -150px;
width: 170px;
line-height: 1;
}
In each of your 3 headline text boxes, you specify "position: absolute;" but do not specify the "top:" property. Specify "top" where they should be and you'll be fixed right up.
Here's the js fiddle- note I added "top" at the end of your CSS:
http://jsfiddle.net/rttmY/7/
#headline1Txt { top: 0; }
#headline2Txt { top: 25px; }
#headline3Txt { top: 50px; }
Also, get rid of those <br />. Since you are positioning absolute, I would also recommend using <div> tags rather than <p> tags because you're technically not making paragraphs, you are positioning blocks. The result would actually be the same, but it's a best practice to use for absolutely positioned blocks.

Have column extend to bottom of browser with an empty header

<div id="content">
<div id="header">
</div>
<div id="main-content">
</div>
</div>
html, body{height:100%;margin: 0px; padding: 0px; background-color: black;}
div#content{width:600px; margin: 0 auto; height:100%;}
div#header{width:600px; height:200px;}
div#main-content{width:600px; height:100%; background-color: white;}
As you can see, adding a header pushes everything down. I want main-content to extend to the end of the browser.
I think i worked around this issue before by creating a header with an image similar to my background in order to fake the appearance, however my background i'll be using is much too complicated.
Are there any methods to do this? possibly a working javascript fix?
You can make your main-content div positioned absolutely and then specify its top and bottom attributes. I've setup a jsfiddle here: http://jsfiddle.net/wrn8Y/1/
div#main-content{
position: absolute;
top: 200px;
width:600px;
bottom: 0px;
background-color: white;
}
Note that the top attribute is set to the bottom of your header, and the bottom is set to zero to hit the bottom of the page. If you wanted to have a footer you could change the bottom attribute to accommodate the footer.
Also you can do this with javascript, I generally use JQuery so here is some JQuery code that gets it done:
$('div#main-content').height($(document).height() - $('div#header').height());
This javascript (Jquery) will work with relatively positioned divs and the only css you would need to change is to remove the "height: 100%" on the "div#main-content" style.

Categories