Issues aligning links that appear on hover - javascript

I am trying to design a tumblr theme. I've set up a div with four buttons at the bottom of each post. One of these buttons is a share button. You hover over the share button and a div appears with links (you click and a new window opens and the post gets shared where ever you selected it to be shared).
In the example below: when I roll over the icon with the mouse, it comes up aligned to the left.
IMAGE HERE: https://drive.google.com/file/d/0B1O3Ee_1Z5cRTDdaSTBQNW5mM0U/view?usp=sharing
Also, when I resize the page, the menu ends up being in a totally different position.
I would like for the menu to appear as it appears in this image. I want the menu to appear directly beneath the div of buttons. I would like this menu to remain in the same position when in the page is resized or is a mobile viewport size. (This is a mock up I made with a photo editor) I've tried various adjustments in my code, etc with no avail.
IMAGE HERE: https://drive.google.com/file/d/0B1O3Ee_1Z5cRX3hPd2ZGekJhU0U/view?usp=sharing
Here is my code:
CSS:
.showme{
display: none;
width:100px;
height:120px;
text-align:right;
margin-top:30px;
z-index:5;
position:absolute;
float:right;
}
.showhim:hover .showme{
display : block;
z-index:5;
}
HTML:
<div class="showhim">
<li style="float:right; margin-left:5px; list-style-type:none; line-height:0px; padding-top:1px;">
<i class="fa fa-share-square fa-lg"></i>
</li>
<div class="showme">
Twitter<br/>
Facebook<br/>
Google Plus<br/>
Pinterest<br/>
Email
</div>
I am open to any method to try and get this to work. I also have no problems with making this an onClick event rather than a hover event. My guess is that an onClick event would be smarter for mobile users (I'd love some input on this).
Any help is greatly appreciated.

At the minimum, you'll want to add something like:
right: 0;
to the CSS of .showme. This will place the block with its right border aligned with the right border of the containing block.
Note that the containing block is not necessarily the immediate parent. You probably want to add:
position: relative;
to the CSS of whichever element you want to use as the containing block (probably .showhim).

Related

How to I make an h3 stay in a specific location?

I'm trying to figure out how to set this <h3> to a specific spot so it doesn't move when items are added to the bag (see screenshots below). Currently I have the <h3> and the "Remove all" button in a flex container, so they are displayed next to each other. I'm a newbie to CSS so if anyone has any better suggestions, please let me know!
Basically I would like it so the "Your Bag" will stay where it is in the second photo, instead of sitting super close to the button and moving around depending on the length of the title of the item being added. The list of items that get added below are in a <div> tag, and the entirety of the page is in another flex container so the "search for a device" is on the left, and "your bag" is on the right.
You can try giving float:right to your h3 tag
h3 {
float: right;
}
or you can use position: absolute and give top and right positions.
h3 {
position: absolute;
top:30px;
right:30px;
}

how to place a div element in the same place as another? (one will be hidden and be toggled by action)

I want to have an image that when clicked will fade out and display text "behind it". Right now all I can do is have my text appear above or below the image depending on where I move the element in the html file.
If I can figure this out the plan is to have the text display:none and image display:block then have them toggled by an action of clicking on the image / clicking on the text div.
If this doesn't make sense I can try to clarify.
I am working on my "tribute page" for free code camp. This is not a requirement but something extra I want to accomplish. The idea is to have my main image fade away and display the list items for "job history and Python timeline". Everything is commented in my code pen link below. In question are the final two div elements "main image" and "job History and Python timeline"
Here is a link to my code pen
<!-- job history and Python timeline -->
<div id="history-timeline" class="text-center" style="display:show; inline">
<p>
<ul>
<li>
<li>
<li>
<li>
</div>
Add position:absolute to your image, so it will be out of the page flow and img will stack over h2. now you can hide the image on click. I used display:none on hover of div. make sure your parent div height match the height of image.
.hide_on_hover{
width:200px;
height:200px;
}
.hide_on_hover img{
position:absolute;
}
.hide_on_hover:hover img{
display:none;
}
<div id="main-image-div" class="text-center hide_on_hover">
<img
id="main-image"
src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg"
class="rounded img-thumbnail " width="200" height="200">
<!-- job history and Python timeline -->
<h2 id="history-timeline">does this work</h2>
</div>
This can easily be accomplished by adjusting the positioning and z-indexing.
Your parent div element will want to have a position: relative attribute. The text will want to then have a position: absolute attribute. This will allow the text to overlap your image. Position relative tells the child element to position themselves respective to the closes parent with a relative attribute.
The next step is to apply a few more attributes to control the layer. From my understanding, you'll want the image to be the top layer, and the text be the lower layer. Solution for this is to apply position: relative; z-index: 2 to your image and add z-index: 1 to your text. The z-index attribute gives a layer order to the overlapping elements. We need to give position: relative to the image because the default position of that element ignore z-index attributes. Things should start looking closer now.
Now, you mentioned using a display: block and display: none attribute to hide your image and show the text. This would work based on the functionality you described, but will create a jump effect since setting to display: none loses height settings so you'll get things collapsing on your page. If you dont want this, you'll want to use visibility: hidden and visibility: visible instead.
However, what I would probably do instead is add a new css class:
.hidden{ opacity: 0 }
This way you can have simpler javascript and also can go to the extent of animating the fade effect. Speaking of Javascript, this would use the following code:
$("#main-image").click(function(){ $(this).toggleClass('hidden') });
Here's what some your modified code looks like:
HTML:
<div id="main-image-div" class="text-center" style="position: relative">
<img id="main-image" src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg" style="margin-top:2%; position: relative; z-index: 2;" class="rounded img-thumbnail">
<h2 id="history-timeline" style="position: absolute; z-index: 1; ">does this work</h2>
</div>
CSS
.hidden{opacity: 0}
Outside the scope of this, you should avoid doing inline styling and have the html just use classes. Reference those classes in your css code and apply your styling there. This allows for cleaner, more manageable code as your site gets built up.
Try this code
$(document).ready(function(){
$("#main-image").click(function(){
$(this).removeClass('show-block');
$(this).addClass('hide-block');
$('#history-timeline').removeClass("hide-block");
$('#history-timeline').addClass("show-block");
});
$("#history-timeline").click(function(){
$(this).removeClass('show-block');
$(this).addClass('hide-block');
$('#main-image').removeClass("hide-block");
$('#main-image').addClass("show-block");
});
});
DEMO

Stacking DIV Click Events for JavaScript

Currently programming a web application that is a rendition of the Board Game Splendor for educational purposes. Right now I'm getting into the part of my coding where we will be handling events.
I'm looking to be able to have the user hover over the cards in the middle and have it dim displaying the word BUY at the top half and RESERVE at the bottom half. Then while hovering over the whole card the user can click either BUY or RESERVE depending on what they want to do.
My assumption right now of how to handle this would be to have a mouseover event in JavaScript for the whole div that contains the card image, and then to have two divs on top of that div (One for the top half and one for the bottom half) that each have separate click events since each will function differently.
I guess I'm wondering, will that be a problem since technically the whole card div will be beneath those two divs? And should I be looking to solve this problem with a different approach in the code? (I can't use things like jQuery in my project either, just HTML CSS and JS)
I would solve the problem using css, specifically using the :hover modifier. The BUY and RESERVE buttons would have display:none, but once you hover over the parent element, in this case the card, you can change to display: block. You can use both the z-index and position css properties to position both buttons anywhere on the card. For example
.card:hover {
position: relative;
z-index: 1;
.buy, .reserve { display: block; }
}
.buy, .reserve {
position: absolute;
z-index: 2;
display: none;
}
With html
<div class='card'>
<div class='buy'></div>
<div class='reserve'></div>
</div>
The two buttons that you are placing on top of each card can have CSS opacity elements on it's background-color property such as rgba(0,0,0,0.5) that allows the rest of the card to show underneath the two button divs and become partially transparent.
As for click events, you're right, the card itself will not be able to be clicked. However, you can access the card itself via event.target.parentNode in order to find what card you are clicking as well as manipulate the card itself on click.

How to align the overlay with the list of icons on hover- JS /CSS

I have a list of <li>'s and a icon next to it which on hover shows an overlay with the information about the 'test'. something like below:
test1
test2
test3
and so on....
html:
<span class="account-info-icon"></span> // icon is the build using image sprites
<div id ="hover-container>
//details about the 'test1','test2'..so on
</div>
js:
$('span.account-info-icon').on("mouseenter", function(event){
$("#hover-container").show();
}).on("mouseout", function(){
$("#hover-container").hide();
});
The above code works fine to show/hide the div container on hover. However I'm having issues with the positioning of the overlay. im using css to position the overlay, as a result of which, the overlay is always positioned below irrespective of which ever icon i hover.
in short because im hard coding the values of the <div> conatiner the overlay always shows at one place and does not move as per the hover over the icons.
Below is the css im using to position the overlay.
CSS:
#hover-container{
display: none;
position: relative;
top: -750px;
left: 943px;
padding: 2px 0 0 9px;
}
Basically what i m trying is to allign the overlay per the flow of the hover. so when i hover over , say: 'test1' icon, the overlay should display next to it. I'm not sure if this is achievable via CSS or Js.
Any ideas appreciated!!!!
Thanks in advance!
To simplify this exercise, become familiar with two css position values: "position:relative" and "position:absolute". Also, proper container arrangement will help you get favorable results.
On the premise that #hover-container just happens to generically refer to a non-replicated ID property in your html, it can have this css definition:
#hover-container{
display:none;
position:absolute;
padding: 2px 0px 0px 9px;
left:100px;
}
Each instance of your span should then be in a wrapper container to help guide the hover to appear exactly where you want it:
.info-row-wrapper {
position:relative;
}
Pulling all of these together, you have:
<div class="info-row-wrapper">
<span class="account-info-icon"></span> // icon is the build using image sprites
<div id ="hover-container>
//details about the 'test1','test2'..so on
</div>
</div>
Here, the wrapper container gives a shell that the absolute positioned element appears inside of. The absolute positioned element respects the position of the parent html container that is explicitly positioned relative (if not already assigned a css position attribute)
please refer to the fiddle - http://jsfiddle.net/L33jo3j7/4/
Pretty much $el.hover() solves the thing.
and let me know if you have any doubts.
This looks better-
http://jsfiddle.net/L33jo3j7/4/

Rotation of CSS arrow and javascript toggling

I have two div banners that have corresponding CSS arrows. When the banners are clicked, the javascript toggles between revealing and hiding the text underneath. Likewise, the respective arrows rotate down when the text is revealed and back up when the text is hidden.
Now, I want my first div banner to be revealed automatically when the page first loads. However, when I drew my CSS arrows, due to the padding of the div, I can't get the arrow in the first div to be the same as the arrow in the subsequent div(s) and line up properly.
http://jsfiddle.net/nVuQ2/1/
I've tried messing with the placement of the arrow:
.tri0 {
margin-left: 20px;
margin-top: 5px;
}
but the best I can do is push the tri0 arrow up to the padding of the h3 tag and it won't go any farther.
Is there a way that I can set a toggle flag in the toggleClass to make it say that the first div banner is already toggled and subsequent clicks make it un-toggle?
Your issue happens because of the border of your tris elements. You are displaying different borders in each one of your elements, this will make them appear in different ways.
So basically I set them with the same borders values, the same rotation, and when your page first load it toggles your div and show your first message.
Note that is not necessary to have two different classes to toggle your element state, once that they are equal.
Check in the Fiddle.
Not sure if this is the solution that you wanted. But I hope that helps you.
Thanks.
Try using absolute positioning instead of floating, this way you can ensure the arrows are always aligned in the middle. You'd set parent div to position:relative, and arrows to position:absolute;
The code will look like this -
.slide0, .slide1 {
position:relative;
}
.tri0, .tri1 {
position:absolute;
top:0;
bottom:0;
margin:auto 0;
}
.tri0 {
right:5px;
}
.tri1 {
right:10px;
}
EDIT: Whoops, I realised I didn't compensate for the rotated arrow. Because the 10px border makes it effectively 10px wide, position .tri1 with right:10px instead. Updated code above, and update fiddle here.
Updated Fiddle

Categories

Resources