on the header of my site http://thetrashedvintage.com/ I use:
<div class="collections" onclick="location.href='http://thetrashedvintage.com/wool-collection';" style="cursor: pointer;">
<img src="http://www.thetrashedvintage.com/collections.jpg" alt="Collections" />
</div>
for make the div clickable, but when I click it redirects somewhere else, when I click on Collections, it redirects me to Login, the next div, any ideas of what I doing wrong?
Thanks for any help!
Your Collections div is being overlapped by your Login div
To fix this,
change your CSS from
div.login {
width: 50%;
right: -130px;
}
to
div.login {
/*width: 50%; <-- REMOVE THIS */
right: 115px;
}
try putting your div in an a like this
<a href="location where your stuff is"><div class="collections" style="cursor: pointer;"> <img src="http://www.thetrashedvintage.com/collections.jpg" alt="Collections" />
</div></a>
You have wrong CSS. If you have FireFox use Inspector, press Ctrl+Shift+C and goto with mouse on login and see margins div login (overlap collections) and goto more left there is margin collection. CSS with fixed position is bad idea.
Sorry for my funny english.
Related
I have a situation where clicking on an image will direct the user to a certain link, but pressing a button that is shown within an image will run a javascript method instead. However, I cannot prevent the page from redirecting to the certain link when the button is pressed (the javascript method is also run when the button is clicked).
I have found out that button cannot be nested within an anchor element, and tried to wrap the button within a form as well, but no luck.
Does anyone know a way around such problem?
the basic logic in code looks like this
<a href="an item description link">
<img src="an item image"/>
<form style="display: inline" action="html_form_action.asp" method="get">
<button type="button" id="add-btn" class="add-cart" onclick="quick_add()">+</button>
</form>
</a>
Thanks in advance for any help!
A straightforward way that validates would be just superimposing the button over the link. This requires the link and the button to be in the same containing element, and for both of them to use position: absolute:
HTML
<div class="box">
<a href="http://example.com">
<img src="http://placehold.it/300x200">
</a>
<button>AAAAA</button>
</div>
CSS
.box {
box-sizing: content-box;
width: 300px;
height: 200px;
border: thin solid black;
}
.box > a {
display: block;
position: absolute;
}
.box > button {
position: absolute;
}
See it in action on CodePen: http://codepen.io/millimoose/pen/avYLjQ
The button will automatically be stacked over the preceding link. (This is specified behaviour.) And it will handle clicks before they can be passed to elements underneath is.
That said, this solution has a few downsides. You'll have to give a fixed size to the container; it can't be sized automatically to fit its contents, because its contents are outside of the rendering flow. This also means they won't automatically fill their parent box unless you set their size explicitly again.
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!
I've added the appropriate js link from pinterest in the appropriate place on my website, and checked all the known errors and still can't seem to get the pin it button to appear on the images of my site.
Thanks for any help. Here is the page live on my personal website:
http://lancebeaudry.com/lindsay/
I've noticed:
<div>
<img src="images/img1.jpg" class="slider-img">
</div>
<!----far away---->
<a class="..." title="Pin it!" data-pin-log="button_pinit_floating" data-pin-href="//www.pinterest.com/pin/create/button/?..." style="top: 110px; left: 1895px; z-index: 8675309; display: block;"></a>
Change that to:
<div>
<a class="..." title="Pin it!" data-pin-log="button_pinit_floating" data-pin-href="//www.pinterest.com/pin/create/button/?..." style="top: 110px; left: 1585px; z-index: 8675309; display: block;"></a>
<img src="images/img1.jpg" class="slider-img">
</div>
Fixing the slider can be kind of complicated, but I tell you about the process I'd follow.
Go to https://github.com/kenwheeler/slick/blob/master/slick/slick.js and download it locally.
The error is most probably related to the swiping effect, so you could try to set swipe: false, where you define the slider image container $('.slider-for').slick({
If that doesn't work reiterate the process with any variable set in the _.defaults or _.initials = { that deals with mouse events.
Furthermore, if that doesn't work identify the part of the code that detect the mouse and change the cursor look. Comment it out. If it works notify the author of your findings.
Hope it helps.
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.
Working in a hackathon and we are having an issue with our phone mockup. We want to anchor the text stream to the bottom: seems like a great opportunity for position: absolute...right? Well that makes it so that our scrolling doesn't work. Right now it is anchored to the top, positioned relative, and scrolling does work.
Try clicking the "I said..." button a few times. Ideally those buttons should be anchored (along with the text boxes that appear) to the bottom.
This is the temporary URL:
http://gotinto.com/text/
AND a PERMANENT JS Fiddle URL:
http://jsfiddle.net/Qyn7V/
Here is the simple HTML:
<div class="convoPhone">
<div class="phoneDisplay">
<div class="convoCont">
<div class="actualConvo">...(the actual text convo goes here)...</div></div></div></div>
Any solutions? We would be open to javascript, CSS, any combination. Thanks in advance!
Have you tried position: fixed? Observing your link, as a proof of concept, something like this should do:
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
Edit:
Put three place holder conversations as place holders with visibility: hidden (this ensures they occupy space).
<div class="convoCont">
<div class="actualConvo" style="">
<div class="invisibleFirst">
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
</div>
</div>
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
<div class="isaid textLine">I said...</div>
<div class="tsaid textLine">They said...</div>
</div>
<br class="clear">
</div>
Then for each of the first 3 real entries, remove one of the place holders. If you want more precision, you can replicate the same place holder effect with padding-top on actualConvo. Just reduce the padding-top by a fixed value until it bottoms out at 0. If you want to make the buttons scrollable, just removed the styling and apply the padding-top at a higher DOM level.
I ended up positioning the buttons absolute, then using a bit of jquery/javascript to make a minimum height. Thanks for your help everyone!
var contH = $('.phoneDisplay').css('height');
if($('.convoCont').css('height') < contH) {
$('.convoCont').css('height',contH);
}