I'm trying to add a "back button" which will toggle the current div to the previous div. Basically, I have a div of an Oklahoma map which fills the window. When the user clicks a certain area of the map, the div is toggled with a div that is the image of the "zoomed-in" area which they selected. I want my back button to appear on top of this zoomed-in div, in the bottom right corner, and if the user clicks the button, the div will be toggled with the original Oklahoma map div.
Here's the code I've tried so far:
CSS:
#backButton
{
position:absolute;
bottom:50px;
right:50px;
background:url('images/backspace.png');
background-repeat:no-repeat;
z-index:2;
height:50px;
width:50px;
}
.button
{
position:absolute;
bottom:100px;
right:100px;
background:url('images/backspace.png');
background-repeat:no-repeat;
z-index:2;
cursor:pointer;
}
HTML:
<div id="backButton" style="display:none; background:url('images/backspace.png');" onClick="#container.toggle();">
<div class="button"></div>
</div>
The button appears correctly, but it isn't functioning. I'm sure it has to do with onClick="#container.toggle();" but I don't know how to do it correctly.
Just for background information, the container is the original Oklahoma map and it is toggled off in my JS code ($("#container").toggle();) when I switch to a zoomed-in div.
EDIT: Ok, so I do have Jquery and I tried making a click event like my other toggle events:
$("#backButton").click(function(e)
{
$("#container").toggle();
$("#backButton").toggle();
});
--> I removed the onClick part in the div. The button will toggle off when I click it, but the container div (Oklahoma map) is not toggling back on.
As you are using jQuery (evident in your code)
Put this in your javascript:
$("#button").click(function(){
$("#backButton").toggle();// hide the div (assume you have it turned on somewhere
$("#container").toggle();) // show the other div
});
remove the onClick="#container.toggle();" from the markup
You want your onClick method to call a valid function such as abcMethod(). (Wherever your toggle code lives).
Related
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).
I have a dialog box. When I call a show on it, everything in the box shows except for the contents in the header DIV and this only happens in firefox. It shows fine in both IE and chrome. I am doing nothing fancy in the dialog box any ideas?
Also it shows up when I hover over the buttons in the dialog box and when i inspect the dialog box but if I reload the page and click show again, the header is no longer there
CSS:
.formHeader {
padding:10px;
background-color:#f2f2f2;
font-size:14px;
font-weight:bold;
}
.dialogContainerBlock .formHeader{
background-color:#333;
color:#fff;
margin-left:-20px;
padding-right:30px;
margin-top:-40px;
position:fixed;
z-index:990;
width:inherit;
}
HTML:
<div class="dialogContainerBlock" style="width:100px; background:black;">
<div class="formHeader">Hi I work</div>
</div>
position:fixed is relative the body of the document, by using negative margins you are hiding the div outside the boundaries of the body.
The negative margin-top seems to be the most relevant style causing this. Watch out for negative margins for hiding things, because when you want to show them you will need to remember to undo them. You might create a class like "closed" and then have that contain the negative margins, then remove that class when you want to show the div.
I have a pretty specific request. I have been looking through some other posts, but can't find a definitive answer on this, so help is appreciated.
I'm looking to get a jQuery tooltip that when hovered is a normal tooltip with the text centered. However, when you click the element, the tooltip widens to the left (the text would remain centered so it'd be appear to be moving left as the tooltips center moved left) and a dropdown menu slides out beneath the tooltip. I am still on the fence on whether or not the widening is going to be necessary, but I want the ability to have the dropdown on click.
Any and all help with this would be greatly appreciated. Thanks!
EDIT*** I have written some code that I can't really get to work. Right now I'm just trying to work it out with divs, hoping I can replace the "toolTip" div with a tooltip shape instead of just a box, but I want to get things working before I worry about that. Any help on the following code is appreciated. Thanks!
I apologize in advance for the lack of some indentation and stuff, I don't know why my code doesn't ever copy/paste well into here.
HTML:
<div id="wrapper">
<div class="topIconNew">
</div>
<div class="topTip">
</div>
<div class="topDrop">
</div>
</div>
CSS:
div#wrapper {
margin:0 auto;
width:100%;
height:100%;
position:relative;
top:0;
left:0;
}
.topIconNew {
background-color:red;
border:solid 1px #444444;
width:20px;
height:20px;
position:fixed;
top:50px;
left:450px;
cursor:pointer
}
.topTip {
background-color:#d3d3d3;
border:solid 1px #444444;
width:80px;
height:20px;
position:fixed;
top:70px;
left:450px;
}
.topDrop {
background-color:#ffffff;
border:solid 1px #555555;
width:100px;
height:300px;
position:fixed;
top:90px;
left:450px;
}
jQuery
$(document).ready(function() {
// tooltip hover
$("div.topIconNew").hover(
function(){
$("div.topTip").show();
}
);
//tooltip widening and dropdown menu
$("div.topIconNew").click(
function(){
//permanent tooltip
$("div.topTip").show();
},
function(){
//widen tooltip
$("div.topTip").animate({width:200},"fast");
},
function() {
//show dropdown
$("div.topDrop").slideDown(300);
}
);
$("div.wrapper").click(
function(){
//hide dropdown (hide simultaneously)
$("div.topDrop").hide();
}
function(){
//hide tooltip (hide simultaneously)
$("div.topTip").hide();
{
);
});
Any and all help is greatly appreciated. Thanks!
Assuming from scratch I'd first build
A dropdown menu class that can be absolutely positioned
A tooltip class that can be absolutely positioned
It would be important for these classes to be self contained e.g. the dropdown should handle all bind events etc... First I'd hook up a hover element over whatever triggers the tooltip then position the tooltip and set the text. I'd then attach an onClick event to the same item and inside that I'd:
Flag the tooltip as "hover out no longer destroys it" (probably use an external click on the document instead)
Run an animate on the tooltip object that both sets the x position to x-200 (for instance) and also sets the width to with+200 (.animate({x: '-=200', width: '+=200'}))
I'd attach an event listener on animate so at the end of the animation I then attach the dropdown relative to the tooltip
If you code them separately it should be easy to tie them all together. You really just have to focus on the main evens in such a system:
Mouseover on item for tooltip
Mouseout on item for tooltip
Click on item to fly out tooltip and flag for permanence
Attaching the dropdown
Responding to dropdown events
I have a couple of position: absolute; "buttons" display:block; <a>'s and a couple of position: absolute; div's with text in them. The div's are hidden by display:none; set to the default.
When you *hover*hover over a button, the div next to it (in the code) should appear (with some kind of fade/scroll effect) and then fade/scroll out again if you move the cursor away from the button.
When you click on a button, the div next to it should stay visible (i.e. display:block;). It should only disappear again if you click on the button or the div itself (hovering over the button or the div shouldn't change anything).
I thought this would be straightforward, but I can't get it to work.
with a little knowledge of your html, here's how I got it.
html
button
<div class="mydiv">some text in it.</div>
jQuery
$('.mydiv').addClass('hover').click(function(){
$(this).addClass('hover').fadeOut();
});
$('a.mybutton').click(function() {
$('.mydiv').toggleClass('hover').show();
// $('.mydiv').removeClass('hover').show();
}).hover(function() {
$('.mydiv.hover').fadeIn();
}, function() {
$('.mydiv.hover').fadeOut();
});
Crazy demo
Greetings,
I have written a modal using jquery UI and it appears at the front of a flash movie thus the html inside the modal becomes corrupt, I tried to hide the movie right before modal gets triggered and reappears after closing the modal, works well but each .hide() and .show() the flash movie gets resetted while all I want is to hide (without removing the movie) and displaying it once it is triggered to .show that modal div.
Tested in FF/linux, FF/WinXp, IE/WinXp, Safari/WinXp:
put your flash container DIV into a new DIV with overflow:hidden.
basic:
to hide flash-div: $('#id_div_with_swf').css("left","-2000px");
to show flash-div: $('#id_div_with_swf').css("left","0px");
or, show and hide with animation effects:
to hide flash-div: $('#id_div_with_swf').animate({ left: "-2000px"},1000);
to show flash-div: $('#id_div_with_swf').animate({ left: "0"},1000);
html example:
<div style="width:200px; height:100px; overflow:hidden;">
<div id="id_div_with_swf" style="width:200px; height:100px; position:relative; left:0px; top:0px;">
<!-- flash here -->
</div>
</div>
you can't get a cross-browser working solution with .css('visibility', 'visible'/'hidden')
Working solution:
Use $('#myvideo').css('visibility', 'hidden') to hide and
$('#myvideo').css('visibility', 'visible') to show the div containing the video.
Just tested it with firebug.
EDIT:
Please note, this is different from .hide() and .show(), as they use the display css, instead of visibility.
Perhaps move the movie div off the screen. Set it's Left position to be -1000 or something like that?
Then replace when the other div has disappeared?