I've a button clicking on which it shows a pop-up message. Code is given below:
<a id="report_button_id" href="#report_form_container" class="form_show_link" style="text-decoration: none; cursor: hand">
<span id="report_button_text_id" class="top_nav_report_button">My Link Here</span>
</a>
<div style="display:none;">
<div id="report_form_container" class="popup_container">
// Some page is displayed here using div tags
</div>
</div>
In Javascript file:
$("a.form_show_link").fancybox({
centerOnScroll:true,
overlayOpacity:0.7,
overlayColor:'#000000',
showCloseButton:false,
hideOnOverlayClick:false,
onStart:resetPopupFormErrors
});
$("#report_form").keypress(function(e) {
if(e.which == 13){
$("#report_form").submit();
}
});
Can any one explain how the above code is displaying pop-up windows on clicking button especially when the style is none????
Thanks!
If I understand your question ('how does this work?'), it is prett simple... Fancybox is moving the target div out of its old container and into a temporary one that it controls. As such, its parent containers no longer have influence on the target (such as 'display:none').
Related
In the code below is a website with a star rating bar. Stars can be clicked. But when I open the chrome developer console to see the javascript code, there are no button tags. Are the 5 stars considered buttons?
Isn't there supposed to be a click event listener?
When I click on a star it turns blue. How can this work?
And which part of the code is exactly the button? Is it this line?
<i class="svi-star ratingicon-full"></i>
<div class="subject-answer">
<div class="ratingbar-container" steps="5">
<div class="ratingbar-wrap" style="height: 40px; font-size: 38px;">
<div class="rating" rel="1">
<i class="svi-star ratingicon-full"></i>
<i class="svi-star-o ratingicon-outline">
</i>
</div>
<div class="rating" rel="2">
<div class="rating" rel="3">
<div class="rating" rel="4">
<div class="rating" rel="5">
</div>
<div class="input-wrapper">...</div>
</div>
</div>
(I just can not copy and paste, I have to buy another coffee first to get a new code to be able to open this website, but I hope the code part I just typed is enough for now)
On the left is the webpage with the rating bar, on the right is the corresponding javascript code (chrome dev console):
![on the left is the webpage with the rating bar, on the right is the corresponding javacode (chrome dev console)][1]
You can have click event on every html element there is. Therefore anything can be a button.
document.querySelector('.div').onclick = () => {
console.log('clicked on a div');
}
document.querySelector('.span').onclick = () => {
console.log('clicked on a span');
}
.div {
background-color: red;
width: 100px;
height: 100px;
}
.span {
background-color: blue;
color: white;
}
<div class="div">
<span class="span">this is a clickable span</span>
</div>
It's possible to create things which are not buttons which can still be clicked (any element can have a click event listener added to it), and in this case, it appears that the website has some italic elements with no contents and some styling with such associated JavaScript.
Best practice is to use semantic HTML which, in this case, would be <button> elements (or possibly <input type="radio">) as these come with all sorts of affordances (which are particularly useful for accessibility purposes as they allow, for example, an arthritic user who can't operate a mouse to navigate with the Tab key or a blind user to access the content with a screen reader).
Note that depending on your geographical location, your audience's geographical location, and the type of service your website offers: You may be legally required to ensure it is accessible.
every HTML element can have an event listener called onClick, it can be a <div> that you can click, it can be <span>, in this case, it's a <i>.
Everything is normal don't worry ;)
Make sure to add the css {cursor: pointer;} so when you hover it will show the hand :)
Comment for more UX questions.
So I've been playing around with the in built popovers from bootstrap. I am pretty new to JS so please be kind!
I've managed to get multiple popovers to show and hide in the way I like but I would very much like them to follow the element that fires the popover when resizing the window and also for the first popover to load when a user loads the page.
I've searched on here and got the first one to show when loading but it doesn't hide when anything else is clicked.
Using
$(function () {
$("#popbadge1").popover('show');
});
my js
$(document).ready(function () {
$("#popbadge1").popover({
html : true,
content: function() {
return $('#hiddenpopbadge1').html();
},
});
$("#popbadge2").popover({
html : true,
content: function() {
return $('#hiddenpopbadge2').html();
},
});
$("#popbadge3").popover({
html : true,
content: function() {
return $('#hiddenpopbadge3').html();
},
});
});
my markup
<ul>
<li><a class="badge1" id="popbadge1" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">1</a></li>
<!-- Popover 1 hidden content -->
<div id="hiddenpopbadge1" style="display: none">
<h3>Content</h3>
</div>
<li><a class="badge2" id="popbadge2" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">2</a></li>
<!-- Popover 2 hidden content -->
<div id="hiddenpopbadge2" style="display: none">
<h3>Content 2</h3>
</div>
<li><a class="badge3" id="popbadge3" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">3</a></li>
<!-- Popover 3 hidden content -->
<div id="hiddenpopbadge3" style="display: none">
<h3>Content 3</h3>
</div>
</ul>
Ideally I would like the popover to follow the button that triggers it as well when the window is resized.
Anyone able to help?
For me, it's not clear what you mean by...
"I would very much like them to follow the element that fires the popover when resizing the window..."
However, getting the popover to show on page load is just a matter of putting your 1st code snippet inside the (document).ready().
And getting the popover to hide when anything else on the page is clicked is similar to this question, which works with something like this:
$(function () {
// When anything is clicked...
$('*').click(function (e) {
// Except popbadge1
if (e.target.attr != 'popbadge1') {
// Hide the popover
$("#popbadge1").popover('hide');
}
});
});
But there is something going on when you try to click back on the first link, where it won't open the popover. Possibly a conflict with Bootstrap, or something else I missed? Regardless, a simple check to see if the popover has been hidden once before solves it.
Here's the full solution at JSFiddle.
Thanks to grayspace for getting the popover to show one on load and in addition to his answer i set the first popover to focus and it seems to have fixed the slight glitch.
$(function() {
$("#popbadge1").focus();
});
https://jsfiddle.net/j4dut2ux/
Also you will see in the fiddle by displaying as an inline box and adding a div around the .a with relative and absolute positing accordingly the popover now follows its parent.
I'm developing a RhoMobile appand I've been having lot of trouble with page transitions.
At the end, I just decided to turn them off for a better user experience. Every button click works perfectly, except for one where I have a button inside a Collapsible element.
For the click event on the button not to get interpreted as a click on the collapsible, I use this js code, which I suspect is causing trouble:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
});
});
And in the HTML:
<div data-role="page" id="index">
Here go headers & navbar and other stuff
</div>
<div data-role="content">
<div data-role="collapsible-set" class="uurbon-block">
<div data-role="collapsible" data-collapsed="false">
<h3 data-position="inline"><p class='alignleft'>Collapsible title</p><div style="clear: both;"></div>
<span style="float:right;" class="button-span">
<a href="some_url.html" data-role="button" data-mini="true" data-inline='true' data-icon="star" data-iconpos="left" class="details" data-transition="none">
Button
</a>
</span>
</h3>
</div>
</div>
</div>
This will cause a blank page to be shown for 1-2 secs before transitioning. I'd be looking for a fix, but if not, i'd be happy with that page just beeing black (my app background is black also, so this blink wouldnt be so noticeable).
Note: I have alredy tried setting body background color in css, won't work.
Thanks for your ideas!
As pointed by Omar, if you want to put a button inside a collapsible and prevent the collapsible from capturing the click while also handling the page in the same browser, the correct way to do this is (Take notice that this may only apply to RhoMobile, but its worth a try on other jquerymobile-based frameworks):
and avoid RhoMobile trying to open this in a new browser is by using:
javascript:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
$.mobile.changePage("your_page");
});
});
HTML:
Button
Notice the href="javascript:;". I had this first set to "#" and also "", but that didn't work.
I am currently building a website for an indie game development team I am working with.
Right now I am writing the alpha sign up page and I have created layout which needs to make use of the slideToggle() and fadeToggle() methods, however after a few hours of faffing around in my editor I cannot seem to fathom a solution for the behavior I want.
When the page loads I want the form container to be in its slid up position and when the user clicks on the div I want the form container to animate down.
I have tried to animate the display property from hidden to block and I have also tried to hide the element when the document loads and then re-show it on click, however when I did that I noticed a strange behavior as the div would slide down and then up, which would cause the user to have to press the button again to view the sign-up form.
The code below handles the click event,
<a href="#" >
<div onclick="$('#showForm .inner').fadeToggle({queue:false});$('#showForm').slideToggle();" id="alpha-container" class="alpha-off"></div>
</a>
And this is the div I want to be hidden and re-appear
<div id="formContainer" class="form container">
<div id="showForm" class="outer">
<div class="inner">
<form method="post" action="verify.php">
<table>
<tr>
<td class="intro">
<h1 class="header-orange">Liberico Alpha Application</h1>
<p class="body-text">So you think you have what it takes to brave the battlefield?
</p>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
I have created a jsfiddle demonstrating how my page currently renders - http://jsfiddle.net/alexmk92/54EUC/ - any pointers would be greatly appreciated.
Firstly, i removed the javascript code from html and added a class "clickable" to the clickable element:
<a class="clickable" href="#" >
<div id="alpha-container" class="alpha-off">CLICK ME FOR ANIMATION</div>
</a>
And then, i've created a custom javascript toggle function with slideDown and up:
$('.clickable').click(function(){
var showFormObj = $('#showForm');
if(showFormObj.hasClass('active')){
showFormObj.removeClass('active');
showFormObj.slideUp();
}else{
showFormObj.addClass('active');
showFormObj.slideDown();
}
});
On the css part i hid the 'showForm' element:
#showForm {display:none;}
Here is the fiddle: http://jsfiddle.net/Karzin/54EUC/2/
If you need to hide the form when page loads. For form container use
display : none
Eg:
http://jsfiddle.net/54EUC/1/
I have been researching and learning more and more about HTML 5, jQuery, CSS3, and the power of hiding and disabling certain elements when JavaScript is or is not disabled. (<noscript> tags)
My questions are,
How do I make a hyperlink ONLY work if JavaScript is DISABLED?
If JavaScript is enabled, how do I make sure that my drop-down login menu displays INSTEAD of following the hyperlink?
HTML
Simple enough, I hide my cart area and change the login link if the JS is disabled.
<!-- If JavaScript is disabled it will make the login link take you to a login page instead of a drop-down box. -->
<noscript>
<style>
.login-form, .js-enabled{
display: none;
}
.cart{
top: -80px;
}
</style>
<div class="cart">
<a href="#" id="cart_img">
<img src="img/bag.jpg" alt="Check Cart"
onmouseover="this.src='img/bag-gold.jpg'"
onmouseout="this.src='img/bag.jpg'">
</a>
Why HorseTack? |
About |
Contact |
Login
</div>
</noscript>
<!-- End JavaScript text -->
<div class="cart js-enabled">
<a href="#" id="cart_img">
<img src="img/bag.jpg" alt="Check Cart"
onmouseover="this.src='img/bag-gold.jpg'"
onmouseout="this.src='img/bag.jpg'">
</a>
Why HorseTack? |
About |
Contact |
Login
<div class="login-form">
<form class="login-frm">
<label><input type="text" placeholder="Username"></label>
<label><input type="password" placeholder="Password"></label><br>
<input type="submit" value="Login"><br>
New User?
</form>
</div>
</div>
JQuery
This makes the login-box slide down (just to avoid taking people to a login page unless they have to)
// Login Box Pop-Up
jQuery(document).ready(function() {
jQuery(".login-form").hide();
//toggle the componenet with class msg_body
jQuery(".login-box").click(function()
{
jQuery(this).next(".login-form").slideToggle(500);
});
});
What I would like instead of having that <noscript> tag and the content duplicated, just a way for the hyperlink to only work when there is no JavaScript.
I have already set the page up to let users know when their JS is disabled (like Stack Overflow has done)
Any questions about my question (hopefully I wasn't vague?) ask!
How do I make a hyperlink ONLY work if JavaScript is DISABLED?
If JavaScript is enabled, how do I make sure that my drop-down login menu displays INSTEAD of following the hyperlink?
Write a JavaScript function that causes the menu to be displayed. Make sure that it captures the first argument (which will be the event object).
Bind the function to the link as an event handler.
Call preventDefault() on the event object.
function (event) { /* display menu then ... */ event.preventDefault(); }
<noscript> tags
There are almost always the worst solution to a problem. Be progressive and unobtrusive.
You could show the link, and if javascript is enabled, hide it.
You can put the link inside a div, and if JS is enabled, remove the link and put an event to that div
Like:
<div class="link-holder">
Link
</div>
And jQuery:
$(document).ready()
{
$('.link-holder').text('').click(function(){
displayLogin(); //assuming displayLogin() has your function to, well, display the login
});
}