I've searched for 3 hours now and cant find a solution. All im after is when you click on an input field in a form, an infobox at the side reveals itself. I tried messing about with jQuery and just couldnt get it to work even though im sure the code is correct (aren't we always lol).
Anyway id appreciate any solution.
My attempt at jquery/css/html looks like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<style>
.infoBubble {
visibility:hidden;
color:#000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$('.box').click(function () {
$('.infoBubble').css({'visibility':'visible'});
});
</script>
</head>
<body>
<form action="process.php" method="get">
<div class="row">
<span class="label">Description: </span>
<input type="text" name="description" id="description" class="box" /><span class="infoBubble">Specific information related to this input</span>
</div>
</form>
</body>
</html>
Firstly, your JavaScript is being executed before the document has finished loading, meaning the input field does not exist. Attach your code to jQuery's ready event to prevent this from happening.
$(function() {
$('.box').click(function () {
$('.infoBubble').css({'visibility':'visible'});
});
}
Secondly, an element hidden with visiblity: hidden will still take up space in the layout. Usually you would use display: none to make it seem as if the element were not there at all. Either way, you can use the show method to make the element visible.
CSS:
.infoBubble {
color: #000;
display: none;
}
JavaScript:
$('.infoBubble').show();
Thirdly, it is possible that your users focus the input without clicking on it (e.g., by pressing tab)! By using the focus event instead of click you can show the message regardless.
$('.box').focus(function() {
$('.infoBubble').show()
});
In addition to the above, you can also use the blur event to hide the message when the user no longer has focus on the input (when they click elsewhere, or tabbing out of it). All together you end up with something like this:
$(function() {
$('.box').focus(function() {
$('.infoBubble').show();
}).blur(function() {
$('.infoBubble').hide();
});
}
Try the following:
$('.box').click(function (){
$('.infoBubble').toggle();
});
By the way. The css-property to hide/show something is not visibility, but display. For example:
display: none;
or
display: block;
Related
I am trying to open an iframe on click and hide the image. Any help as to why this does not work would be great! Thanks
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#button').click(function () {
if (!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="http://www.test.com" width="100%" height="700"></iframe>');
document.getElementById('loadingimage').style.visibility = 'hidden';
}
});
});
</script>
<div id="button"><img id "loadingimage"class="alignnone size-full wp-image-2077" src="https://www.test.jpg"
alt="test image" width="860" height="474" /></div>
<div id="iframeHolder"></div>
</body>
Several points:
As #stud3nt noted, your HTML is invalid. Also a space is missing between "loadingimage" and class. You should be using an editor that highlights HTML and JavaScript syntax errors.
Use proper the HTML elements for the proper job. If you want to have a button, then use a <button> element and not a <div> element.
Hiding the image inside the "button" with visibility: hidden is strange thing to do. This won't remove the button element, so it's still there and still can be clicked. Learn the difference between visibility: hidden and display: none. When you are using jQuery you can use .hide() and you should use it on the "button" itself and not its content.
jQuery 1.6.0 is ancient. Either use a current version, or better, don't use jQuery at all. For one jQuery isn't really necessary anymore and also as a beginner you should learn how to write plain JavaScript.
There is typo in your img html element.
You forgot to add = in <img id "loadingimage" ...
Correct code - <img id="loadingimage" ...
I am developing an php aplication and I used datepicker javascript. The problem with this is that if I scroll down it does not appear in the right position. It gets really bad if the page gets too long, the date picker is not even visible.
I am using IExplorer, it might be outdated. It is not a solution to update the browser, cause this needs to run on 200+ PCs
<script type="text/javascript" language="javascript">
$(function(){ $("#udate").datepicker({ dateFormat:'yy-mm-dd'}); });
</script>
<input type="text" id="udate" name="udate">
Code as requested by comment
<style type="text/css">
html {
overflow-y: scroll;
}
body {
size:8;
}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
If the datepicker is generated inside the container this wouldn't be a problem.
See this
Solution: http://jsfiddle.net/jbK6a/15/
I placed the datepicker behind the input with the beforeShow event.
And I used position: relative; on the scrollable container so that the absolute element listens to the container.
Or Allow the scroll for your list and fix the Date picker.
Try this work around to adjust position of datepicker after it opens (please adjust position as per your requirement)
<script type="text/javascript" language="javascript">
$(function(){
$("#udate").datepicker({ dateFormat:'yy-mm-dd'});
// bind click event and adjust datepicker position.
$(".hasDatepicker").click(function(e){
$("#ui-datepicker-div").css({'top':e.pageY+20,'left':e.pageX-250});
});
});
</script>
<input type="text" id="udate" name="udate">
make sure you got
<!DOCTYPE html>
at the top of your html output.
The solution was a combination of the answers.
For start I did what norhkildonan said:
make sure you got
<!DOCTYPE html>
at the top of your html output.
Then edited a bit the css and after that added Bhushan Kawadkar part:
<script type="text/javascript" language="javascript">
$(function(){
$("#udate").datepicker({ dateFormat:'yy-mm-dd'});
// bind click event and adjust datepicker position.
$(".hasDatepicker").click(function(e){
$("#ui-datepicker-div").css({'top':e.pageY+20,'left':e.pageX-250});
});
});
</script>
<input type="text" id="udate" name="udate">
What worked for me was adding the class 'container' where I needed it attached.
I can't seem to make a div appear after making it invisible in onload in the body. This should be simple to fix, I just can't seem to figure it out.
PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php include '/include/init.php'; ?>
<script type="text/javascript" src="/js/jqeury.js"> </script>
<script type="text/javascript" src="/js/accounts.js"> </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<title>Accounts</title>
</head>
<body onload="hide_buttons()">
<div class="accounts_headerDiv">
<div class="ahd_left">
<img src="/images/launcher2.png" class="accounts_logo"/>
<p class="title_para"> Accounts </p>
</div>
<div class="ahd_right">
<div class="searchDiv">
<p class="searchPara"> Search </p>
<input type="text" id="search_input" placeholder="search" class="search_input"/>
<img src="/images/search_icon.png" class="search_icon"/>
</div>
<div class="userDiv">
<img src="/images/default-portrait-icon.jpg" align="right" class="user_picture" />
<p class="userInfo"><?php username($db);?></p>
Log out
</div>
<div class="adminUserButtonsDiv" id="aubd">
<input id="createUser" name="createUser" value="Create" type="button" class="admin_button">
<br />
<input id="editUser" name="editUser" value="Edit" type="button" class="admin_button">
</div>
</div>
</div>
<hr />
<?php if (is_admin($db) === 'true') { ?>
<script type="text/javascript" src="/js/admin.js"> </script>
<?php } ?>
</body>
</html>
The hide_buttons() function is in accounts.js here
function hide_buttons() {
$('#aubd').hide();
}
Then I want to make the div reappear when I call admin.js which holds this function
$(document).ready(function() {
$('#aubd').show();
});
The overall goal here is to check if the user has the role of "admin" and hide or show the div and buttons contained within based on this check. So what am I doing wrong? Also is this the correct way or should I be using AJAX for this?
The onload event happens very late in the page load cycle. jQuery's ready callback happens much earlier (normally). So what's happening is that your show call is happening before your hide call.
The best fix is to not use onload. Instead, just output the div hidden:
<div id="aubd" style="display: none">....
Or in your CSS:
#aubd {
display: none;
}
Then your ready handler will show it just fine.
If you can't change the onload, you can change admin.js so it calls show later:
$(window).load(function() {
setTimeout(function() {
$('#aubd').show();
}, 0);
});
The setTimeout with the very, very short timeout value is there to avoid race conditions with the load event handlers. (jQuery hooks up the handler via addEventListener / attachEvent. Some browsers fire the onload handler first, and then the addEventListener / attachEvent handlers. Others do it the other way around.) But again, it's best to avoid this entirely by hiding the div differently in the first place.
You can put show statement in window.load instead of DOM ready so that it is executed after admin.js is loaded
$(window).load(function() {
$('#aubd').show();
});
As T.J. Crowder pointed out there is race condition in event that could be avoided using setTimeout.
$(window).load(function() {
setTimeout(function() {
$('#aubd').show();
}, 1);
});
My suggestion, which might fix your problem is to have it hidded in CSS.
Using #aubd {display:none;} then the element is hidden already when the page loads, avoiding sometimes showing up and being hidden flashing.
This fixes it and I think it's a better way to code. The answer "why" it doesn't work I think T.J. Crowder answered.
i want to disable right click on the webpage but i want enable right click on textarea. Hey wat is this provide answers dont post lot of comments on right click (lol). i dont care if people would see my source code, thats nt the point ... i just want to know how one can enable right click only in the textarea while disabling the rest
so any1 here know the javascript function that would perform the job ??
is the below code possible ??
<html>
<head>
<title> Your Title </title>
</head>
<body oncontextmenu="return false;">
<textarea oncontextmenu="return true;">
</textarea>
</body>
</html>
-thanx in advance
-miss subanki
To enable right click on a particular element on the body while disabling the right click on the rest of the body (in html), you wil have to put the required element (whose right click you want to enable) into an iframe. And disable the right click on main body like this....
Main Body
<html>
<head>
<title>Your Title</title>
</head>
<body oncontextmenu="return false;">
<iframe src="frame1.html">
</iframe>
</body>
</html>
frame1.html
<html>
<body>
<textarea> Your text, u can right click here </textarea>
</body>
</html>
if anyone else has a better answer please post it here, thanx everyone.
What about: http://www.dynamicdrive.com/dynamicindex9/noright2.htm
But there's not much point disabling right click, it's easy to bypass and get content.
http://www.quirksmode.org/js/events_properties.html#button has probably all the information you need. You get the click event and test to see which keycode it is. Then choose to return false or true depending on where the click came from.
I have found one solution:
document.superListener = document.addEventListener;
document.addEventListener = function(type, listener, useCapture){
if(type != 'contextmenu')
document.superListener(type, listener, !!useCapture);
};
from here:
https://stackoverflow.com/a/3009161/3649420
You can disable the right click using javascript to keep the honest people honest. But the not so honest people can easily reverse this. If you are interested read on "oncontextmenu" property of html elements.
let divs = $("div");
divs.each(function(i, v) {
$(v).on("contextmenu", function() {
return false;
})
})
$(".no").off("contextmenu");
body {
background: black;
}
.yes {
width: 100px;
height: 100px;
background: tomato;
text-align: center;
}
.no {
width: 100px;
height: 100px;
background: cyan;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="yes">No Click</div>
<div class="no"></div>
<div class="yes">No Click</div>
<div class="no"></div>
<div class="yes">No Click</div>
The off() method removes event handlers that were attached with on().
jsfiddle => https://jsfiddle.net/dare444/we91t5gd/183/
basically what I want is simple, when people onclick, the field become editable.
After they change the value, press Esc at keyboard/ or click outside , to save the record.
I'm not sure why it's not working. Documentation seems not complete... Anyone got idea on how this work?
The documentation page: http://www.appelsiini.net/projects/jeditable
Here I post my existing code here for guys to review.
testing.html
<head>
<title></title>
<script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.jeditable.mini.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(".click").editable("jeditabletest.php", {
indicator : "<img src='indicator.gif'>",
tooltip : "Click to edit...",
style : "inherit"
});
});
</script>
<style type="text/css">
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
.editable input[type=submit] {
color: #F00;
font-weight: bold;
}
.editable input[type=button] {
color: #0F0;
font-weight: bold;
}
</style>
</head>
<body>
<b class="click" style="display: inline">Click me if you dare!</b></> or maybe you should
</body>
</html>
jeditabletest.php
<?php
echo "hehehe"
?>
does anyone know what's wrong? I tried so many times, it just not working at all. All related library files are already put in.
To enable submitting the form when user clicks outside do the following:
$(".editable").editable("http://www.example.com/save.php", {
onblur : "submit"
});
Submitting when pressing ESC is generally a bad idea since ESC is universally reserved for canceling. If you really really want to do this you need to edit Jeditable code. Search and edit the following in jquery.jeditable.js:
/* discard changes if pressing esc */
input.keydown(function(e) {
if (e.keyCode == 27) {
e.preventDefault();
reset.apply(form, [settings, self]);
}
});
yeap: i recommend http://valums.com/edit-in-place/
It uses div's contentEditable property. You may want to look into that before you start using it.
jrh
I ran your code and it seemed to work fine. I think the reason why it's not working for you is that this .html page needs to be run from a web server like http://localhost/mypage.html.
The jeditable plugin is making an AJAX call to the server whenever you try to save the edited text and for the AJAX call to work you need to run the page from a server.
Hope this helps!