I have a problem with changing objects display property with Javascript.
I fill a table from data in a mysql database using php, and for each row it makes a DIV with display:none property as I want, and I have a simple JavaScript function to show/hide the div.
Here is css for div :
display:none; /*initially menu item is hidden*/
position: absolute; /*absolute positioning to float*/
background-color:#fff;
width:230px;
min-height:120px;
right:60px;
border:5px solid #ccc;
text-align:right;
direction:rtl;
padding:10px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
and this is the javascript :
function showfield (a) {
document.getElementById(a).style.display = "block";
}
function hidefield (a) {
document.getElementById(a).style.display = "none";
}
The function works and divs show at the place they must, but the problem is :
when I call the JavaScript function to show, it shows the div but the page scrolls to its top and for seeing the opened div I should scroll down, as my page is a report page it may be a long long page and this is not a good happening at all!
I can't understand why its happens and is there a way to prevent this auto scrolling?
please try below code its working for me.
<script>
function showfield(a)
{
document.getElementById(a).style.display = "block";
}
function hidefield(a)
{
alert(a);
document.getElementById(a).style.display = "none";
}
</script>
show
hide
<div id="myid">test content goes here</div>
try this thn....
HTMl
<a style="text-decoration:none; color:black;" href="#<?php echo("a".$cntr); ?>" onclick="return showfield(<?php echo($cntr); ?>)"><?php echo($cntr); ?></a>
JAVASCRIPT
function showfield(a){
document.getElementById(a).style.display = "block";
return false;
}
Javascript void didn't work for me.
My solution: try giving your button or the href="#mybutton" and id="mybutton". So the page will jump to the button (you can do this for the field too). If you give it href="#" it will jump to the top of the page. And href="" will reload the page and undo the function.
Related
I have a div with only one focusable element button (close button), when the lightbox opens focus should be on div. when i press tab focus should goto 'close' button.
As per assertive technology(blind users) close button should be at the bottom of the DOM,that is one reason DIV should be focus when lightbox triggers.
I have set
<div id="div-id" role="dialog" tabindex="-1" aria-labelledby="operations-help">
and in jQuery set :
$('#div-id').lightbox_me({
destroyOnClose: true,
onLoad: function() {
$('#div-id').focus();
}
});
but focus is setting on close button only, is there any way i can set focus on DIV.
Thanks
A div can't take focus afaik. If the div has a button you could instead call
$('#div-id button').focus();
Or if I've misunderstood and the div is the button can changing the div to a button or submit input should allow focusing.
Use
window.location.hash = '#div-id';
This will scroll to the element, essentially focusing it.
So finally,
$('#div-id').lightbox_me({
destroyOnClose: true,
onLoad: function() {
window.location.hash = '#div-id';
}
});
I guess this should work.
A div is not a focusable element.
A possible solution is to set a button/link with dimensions 1px by 1px somewhere on the corner of the div and set focus on it.
aria-labelledby could be then set on that button instead of the entire div :)
Do let me know if that works. If using a link, make sure you set href as #.
You could also, add a button and hide it. Not with display: none, but with z-index, so that it remains tabbable.
Hey you cannot focus div element but you can do a little work around and put after or inside of this div element that you can. Here is example:
var div = document.getElementById("test2");
div.addEventListener("focus", function(){alert("it's a test")});
#test{
width:200px;
height:200px;
background-color:#0CF;
z-index:1;
}
#test2{
position:absolute;
z-index:0;
width:100;
height:100%;
opacity:0;
cursor:default;
}
<div id="test"><textarea id="test2"></textarea>sdfsdf</div>
I am able to fix by setting property :focusPopover : false , this solved my problem.
$('#div-id').lightbox_me({
destroyOnClose: true,
focusPopover : false,
onLoad: function() {
$('#div-id').focus();
}
});
Change your jQuery to
$('#div-id').lightbox_me({
destroyOnClose: true,
onLoad: function() {
$('#div-id').attr('tabindex', 1).focus();
$('.close').attr('tabindex',2);
}
});
UPDATE
$('#div-id').lightbox_me({
destroyOnClose: true,
centered: true,
onLoad: function() {
$('#div-id').find('a:first').parent().focus()
}
});
here is the fully functional working demo https://jsfiddle.net/jfy5n2nf/1/
NOTE: on pressing tab key focus shifts to close button and a red border appears
Try it with HTML5 contenteditable
$('#focusbtn').click(function(){
$('#div-id').focus();
});
$('#div-id').on('focus', function(){
alert('I am focusing in div!');
});
$('#div-id').keypress(function(e){
e.preventDefault();
});
#div-id{
pointer-events: none;
cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-id" role="dialog" contenteditable="true">
I am the div. Please focus on me
</div>
<BR/>
<button id="focusbtn">Focus</button>
you can try,
position:fixed;
it will always be in the same position even when scrolling,
here is my code, it will be always on the center of the screen.
.example
{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:800px;
height:450px;
background:#ffffff;
z-index:51;
padding:20px 10px 10px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
}
I am trying to display a hidden div (with a class .details) whenever a mouse hover at an element .tags in a page. This is working but not as expected.
I want the mouse should be able to enter the displayed .details and should even be able to click on its contents as we have here in StackOverflow tags
but the moment the mouse leaves .tags everything disappears. How can I delay the appearance of .details and have it allow mouse to select
its content whenever a mouse hovers over .tags?
HTML code:
<div class = 'tags'>
<div class='details'>
<a href='a.html'> jQuery </a>
<a href='b.html'> PHP </a>
<a href='c.html'> MySQL </a>
<a href='d.html'> Ruby on Rails </a>
</div>
</div>
CSS code:
.details {
background-color: rgb(235,243,243);
border-radius: 7px;
padding: 3px;
width: 240px;
float: left;
position: relative;
margin-top: 5px;
font-weight: 400;
}
jQuery code:
$(document).ready(function(){
$('.details').hide();
$(document).on('mouseover', ".tags", function () {
var $this = $(this);
$this.find('.details').slideDown(100);
});
$(document).on('mouseleave', ".tags", function () {
var $this = $(this);
$this.find('.details').hide();
});
});
Thank you in advance.
Create jsfiddle for answer. The problem is in .parents('.tags'), because $this is already tabs element. And $this.parents('.tags') returns empty jQuery object.
Add this style to your page and see if this helps
.tags {
height: 100px;
width: 200px;
}
the reason is because the .tags div is so small. Even though the .details div populates the .tags div it doesn't force the size of the element to increase.
which is why it is so hard for you to navigate across the .details div
You are hiding the tag that you want to control the mouse over event for.
Also, look at this way of setting up the selector, it makes it far more readable:
$(".tags").on('mouseover', function () {
alert("hi");
});
http://jsfiddle.net/tVEkF/
When clicking the "see more" the text does not expand. How come? Thanks
HTML:
<div id="wrap">
<h1>Show/Hide Content</h1>
<p>
This example shows you how to create a show/hide container using a
couple of links, a div, a few lines of CSS, and some JavaScript to
manipulate our CSS. Just click on the "see more" link at the end of
this paragraph to see the technique in action, and be sure to view the
source to see how it all works together.
<a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">
See more.
</a>
</p>
<div id="example" class="more">
<p>
Congratulations! You've found the magic hidden text! Clicking the
link below will hide this content again.
</p>
<p>
<a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">
Hide this content.
</a>
</p>
</div>
</div>
Javascript:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID).style.display != 'none') {
document.getElementById(shID).style.display = 'none';
}
else {
document.getElementById(shID).style.display = 'block';
}
}
}
CSS:
body {
font-size: 62.5%;
background-color: #777;
}
#wrap {
font: 1.3em/1.3 Arial, Helvetica, sans-serif;
width: 30em;
margin: 0 auto;
padding: 1em;
background-color: #fff;
}
h1 {
font-size: 200%;
}
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
Live DEMO
You're calling showHide from the HTML window, but showHide hasn't been defined yet. Just include the showHide function in a <script> block in the HTML window, and it will work. See my jsfiddle: http://jsfiddle.net/HGbSX/1/
The additional problem with having to click twice to show the additional content has to do with your logic. The first time you come through, the display for that element is not set to none as you expect, but to an empty string, so it's re-hiding it. You can correct this by reversing your logic, and looking for display='block'. See my jsfiddle: http://jsfiddle.net/HGbSX/2/
I have corrected a small bug that it needs 2 clicks to start the functioning. Just replaced != 'none' has been replaced with == 'block'. Also, in JSFiddle, you had chosen wrong setting under the 'choose framework'. It should have been 'head no wrap'.
http://jsfiddle.net/EMEL6/12/
Also a very simple way to achieve the same:
function showHide() {
$('#example').toggle();
}
The code is correct; the reason it is not working is because the way you have the jsfiddle set up. On the right side where it asks for a framework/where you want your JS to show up, you have jQuery and onLoad (the defaults, I believe) - this makes it so that the resulting code of your fiddle looks like this:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID).style.display != 'none') {
document.getElementById(shID).style.display = 'none';
}
else {
document.getElementById(shID).style.display = 'block';
}
}
}
});//]]>
Which means you are defining showHide within the anonymous function of jQuery's load event. If you change the first dropdown to 'no wrap (head)' it will leave your JavaScript alone and your onclick will be able to see the function as defined.
I have a hidden div that I show when the mouse hovers.
Then when I click the text changes and I want the div to be permanently shown. The problem is that it disappears again when the mouse moves off.
Is there a way in jQuery to override the mouse out hide in the css?
Thanks
CSS
.saveCompare {
display:none;
margin-left: 10px;
background-color:#BDD455;
color:#ffffff;
padding: 2px 8px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.listingContainer:hover .saveCompare {
display: inline;
}
jQuery
$("div.saveCompare").click(function() {
$(this).text('Compare Added');
$(this).show();
return false;
});
Thats probably because of your "display:none" in the ".saveCompare". The div still has this class. So its going to hide the div.
Maybe you can write a new class:
.saveCompareNew {
display:inline;
margin-left: 10px;
background-color:#BDD455;
color:#ffffff;
padding: 2px 8px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
And then use this call to remove your old class and add your new class
.removeClass("saveCompare").addClass("saveCompareNew")
Thats probably no the best solution, but it should work.
Before you hide the form on mouseout do a check
$('#yourElement').hover(function(){
//show your form
},function(){
if (!textHasChanged)
//hide your form
});
As far as I know it is not possible to manipulate pseudo-classes in JavaScript (correct me if I'm wrong). You could go for a all-jQuery solution with sth like this:
$('.saveCompare').hide(); //you could do this in the CSS as well
$('.listingContainer').hover(function(){
$(this).children('.saveCompare').show(); //on mouse over show child .saveCompare
},function(){
$(this).children('.saveCompare').hide(); //on mouse out hide child .saveCompare
});
$('.saveCompare').click(function(){
$(this).append('<p>Added</p>').parent('.listingContainer').unbind(); //remove parent element's hover handler when clicked and show .saveCompare forever
});
I would like to add a popup message like the one that appears on Stack Overflow when I am not logged in and I try to use voting buttons.
What is the best method for achieving that?
Is it done using a jquery library?
EDIT: The code below shows how to replicate the bars that show at the top of the screen when you get a new badge, first come to the site, etc. For the hovering dialogs that you get when you try to comment too fast, vote for your own question, etc, check out this question where I show how to do this or just go straight to the example.
Here's how Stackoverflow does it:
This is the markup, initially hidden so we can fade it in:
<div id='message' style="display: none;">
<span>Hey, This is my Message.</span>
X
</div>
Here are the styles applied:
#message {
font-family:Arial,Helvetica,sans-serif;
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:105;
text-align:center;
font-weight:bold;
font-size:100%;
color:white;
padding:10px 0px 10px 0px;
background-color:#8E1609;
}
#message span {
text-align: center;
width: 95%;
float:left;
}
.close-notify {
white-space: nowrap;
float:right;
margin-right:10px;
color:#fff;
text-decoration:none;
border:2px #fff solid;
padding-left:3px;
padding-right:3px
}
.close-notify a {
color: #fff;
}
And this is javascript (using jQuery):
$(document).ready(function() {
$("#message").fadeIn("slow");
$("#message a.close-notify").click(function() {
$("#message").fadeOut("slow");
return false;
});
});
And voila. Depending on your page setup you might also want to edit the body margin-top on display.
Here is a demo of it in action.
Also checkout jQuery UI Dialog
I use jqModal, easy to use and you can achieve some great effects
Using the ModalPopup in the AJAX control toolkit is another way you can get this effect.
Here's what I found from viewing the StackOverflow source. Hopefully saves some time for someone.
The showNotification function is used for all those popup messages.
var showNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg)};
var showFadingNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg,true)};
//master...
showErrorPopup: function (e, h, f) {
var g = $('<div class="error-notification supernovabg"><h2>' + h + "</h2>" + (f ? "" : "(click on this box to dismiss)") + "</div>");
var i = function () {
g.fadeOutAndRemove()
};
$(e).append(g);
g.click(i).fadeIn("fast");
setTimeout(i, (f ? Math.max(2500, h.length * 40) : 1000 * 30))
}
css
.error-notification{z-index:1;cursor:pointer;display:none;position:absolute;padding:15px;-moz-box-shadow:2px 2px 5px #000;-webkit-box-shadow:2px 2px 5px #000;box-shadow:2px 2px 5px #000;}
.error-notification a{color:inherit;text-decoration:underline;}
.error-notification li{font-size:110%;padding-top:3px;}
.supernovabg{color:#fff !important;background-color:#fe7a15 !important;}
It's cool how they use the length of the message to set the fading timeout. I didn't realize all the (non-fading style) messages actually fade out after 30 seconds.
Check bootstrap. There are some pop-up effects, modals, transitions, alerts, everything based on javascript and css.