I am just delving into using jQuery and I want to start off by using good coding logic. I am developing an upload site where users can select "upload from computer" or "upload from url". I have two links above the content where users can choose to upload from their computer or from a url, and I want the content to change with jQuery (with some effects) when the user makes their choice.
Demo of what I want:
http://imgkk.com/
In the content box where it says Upload: Images URL NFO, I want my content to slide like that.
I know how to accomplish this, but I'm not sure if its the correct way. I was going to check which content is visible when the user clicks the link and act accordingly, is this the best way?
Thanks.
EDIT: In response to someones answer:
$(".upload-options a").click(function(e){
var id = $(this).attr('href'),
$target = $(id);
alert($target);
if(!$target.is(':visible')){
// Show $target here since it is not currently visible
alert('Show: ' + $target);
}
});
Markup:
<p class="upload-options">
Normal upload
URL upload
</p>
<div id="normal-upload">
// normal upload stuff
</div>
<div id="url-upload">
// url upload stuff
</div>
Cheers!
I normally follow a pattern like this:
<div id="links">
Computer
URL
</div>
<div id="panes">
<div id="computer">
</div>
<div id="url">
</div>
</div>
And then the jQuery:
$(function(){
$("#links a").click(function(e){
var id = $(this).attr('href'),
$target = $(id);
if(!$target.is(':visible')){
// Show $target here since it is not currently visible
}
e.preventDefault();
})
});
Checking the visibility is the simplest way to accomplish this.
Related
I have a reporting function answerCardInnerLinkReportingCall which gets invoked on click on <a> tag inside a specific div. I use event.preventDefault(); to override the default click behavior.
Currently I am redirecting the user to the target url in the reporting function after sending all the reporting parameters using window.open('http://stackoverflow.com/', '_blank'); method.
jQuery(document).on('click','#answerCard a', function(event) {
event.preventDefault();
answerCardInnerLinkReportingCall(this);
});
If I use onclick function in the tag I would have returned true and it would make href work without me redirecting the user manually but is it possible to do the same in click handler? I can't use onclick since I dont have control over the html data.
I wanted to check if there is a better way of implementing this?
Edit1: Adding sample HTML
<div class="answer" style="display: block;">
<div class="well">
<div id="answerCard" answercardid="check_phone_acard">
<h3 id="answerTitle">check your phone</h3>
<div><ol class="answerSteps"><li>Go to <a title="Link opens in a new window" href="https://test.com" target="_blank">Check phone</a>. If prompted, log in.</li></ol></div>
<label id="seeMoreAnswer">Displaying 1 of 1 steps. </label></div>
<!-- Utility Section -->
<div class="util">
<span class="pull-left"><a id="viewFull" href="/test.jsp?sid=52345">View full article ?</a></span>
<span class="pull-right">
</div>
</div>
</div>
</div>
I guess you dont need to use any 'event.preventDefault();' if you want to use links native functionality after the script executed.
try like this
jQuery(document).on('click','#answerCard a', function(event) {
//event.preventDefault();
alert('script running');
answerCardInnerLinkReportingCall(this);
});
also created JS Fiddle. check it out.
You can use javascript's:
window.location.href = 'http://url.here.com';
To tell the browser to navigate to a page. Hope it helps.
Other way can be of returning true or false from answerCardInnerLinkReportingCall and depending on that call or dont call event.PreventDefault();
Try something like this:
$('#answerCard a').click(function(event) {
var loc = $(this).attr('href');
event.preventDefault();
answerCardInnerLinkReportingCall(loc, this);
});
function answerCardInnerLinkReportingCall(loc, that){
// your code to do stuff here
window.open(loc, '_blank');
}
See this demo fiddle
In the dashboard from my project, the follow code handle all clicks in hyperlinks:
$('document').ready(function(){
$('#box').draggable();
$('#box').hide();
$('#button').click(function(){
$('#box').hide();
$('a').unbind();
});
$('a').click(function(e){
if($(this).attr('href') != 'logout.html') {
e.preventDefault();
$.get($(this).attr('href'), function(data){
var $temp = $('<div/>', {html:data});
$('#title').text($temp.find('title').text());
$('#text').html($temp.remove('head').html());
$('#box').show();
});
}
});
});
The content of the pages is opened in this <div>:
<div id="box">
<div id="header"> <span id="title"></span> <span id="button">X</span> </div>
<div id="text"> </div>
</div>
My problem is: after I "close" the <div> by clicking in 'button', I can't access the other options anymore, because all of them stay blocked. When I refresh the page all back to work.
Someone knows how to solve this?
Ok, after more tryouts I managed to find the problem: happens that the pages I open in the <div> have some included scripts on them. When I remove this scripts, the behaviour in the parent window back to normal. Probably some type of conflict between the two scripts are happening.
I want to display the href link in the <div id="display"></div> tag so when I press anything in the menu or in my list it'll just open in the div with display as its id.
I have this menu like this done
<div class="menu">
HOME
</div>
<div id="display"></div>
and my JavaScript is like this
$('#display').html($('.menu a').html());
I don't know much about javascript, but I think the javascript code is actually wrong, I would appreciate is someone would help me.
I want to display the href
You need to fetch href property for that you can use .prop()
$('#display').html($('.menu a').prop('href'));
Demo
In case you mean retrieve the page and place it in the div:
// bind click event to all anchors within .menu
$('.menu a').click(function(e){
// fetch the page using AJAX and place the results in #display
$('#display').load(this.href);
// prevent navigating away from the page (default action of anchor)
e.preventDefault();
});
(Or maybe it's just me, but the question seems very hard to understand. :shrug:)
$('.menu a').on('click',function(e){
e.preventDefault(); //this will keep your link from loading
var href = $(e.currentTarget()).attr('href');
$('#display').html(href);
});
We can use an iframe to display the link in the <a> tag.
Here's a fiddle
Here is my version...
HTML
<div class="menu">
<a id="xxx" href="http://stackoverflow.com" onkeydown="myFunc()">HOME</a>
</div>
<div id="display"></div>
JS
$(document).ready(function() {
var data = $("a#xxx").attr("href");
$('#display').html(data);
});
I will post below html and javascript to make things clear... But before I do that, I will explain a bit what I am trying to accomplish.
Basically I want to make some pages to open without page reload. That was successfully done. Now, I cannot find any solution on how to make that page which is clicked, to remain opened on page load/reload.
<nav>
Home
Download
About
Contact
</nav>
<div id="container">
<div id="home">
Home
</div>
<div id="download">
Download
</div>
<div id="about">
About
</div>
<div id="contact">
Contact
</div>
</div>
$(function(){
var $menuItems = $('nav a'),
$container = $("#container");
$menuItems.on('click', function(e) {
e.preventDefault();
$(this.hash, $container).delay(300).fadeIn(1000).siblings().fadeOut(1000);
});
});
Thanks to Marcus Ekwall for help on the javascript!
Now... I am really wondering how can I use these href's to load clicked menu page when page is reloaded and also how to load home page on first visit. Cause what I get is blank page (no content) until I click on one of menu items.
Cheers.
If localStorage is ok for you?
$(function() {
var $menuItems = $('nav a'),
$container = $("#container");
$menuItems.on('click', function(e) {
e.preventDefault();
$(this.hash, $container).delay(300).fadeIn(1000).siblings().fadeOut(1000);
localStorage.setItem('currentpage', this.hash);
});
if (localStorage.getItem('currentpage')) {
$(localStorage.getItem('currentpage'), $container).siblings().hide();
}
});
UPDATE
Added a demo.
I want to use fancybox to popup a message if a certain button is clicked.
I want the fancybox message to only contain some text,
and a 'close' button, i dont mind using the default button if there is one.
can someone give an example of how it should be written in the html page and the js page?
any help will be much appreciated!
Assuming your button has an id of yourButton:
$("#yourButton").click(function () {
var content = $("<div>Hello<br /><br /></div>");
var button = $("<input type='button' value='Close Me!' />");
content.append(button);
$.fancybox({ content: content });
$(button).click(function () { $.fancybox.close(); });
});
This should be able to help you:
http://fancybox.net/howto
Once you have required all the relevant files, to hook it up to all linka, use this:
$("a").fancybox();
If the html is complicated enough you might prefer putting it in a hidden div as I've done below. This is a scaled down version of code I'm running on my site to do a fancybox dialog box. Works with FancyBox version 1.3.4 (I haven't upgrade to 2 yet). Personally, I like the default close button (circle X in top right corner) and even pressing Escape works, but I've added a custom close button to the popup. It includes javascript to close FancyBox.
<a id="mylink" href="#mypopup">link style button</a>
<div id="mybutton">button</div>
<div style="display:none">
<div id="mypopup">
<h1>My Title</h1>
<p>My Message</p>
<!--... other complex html can go here ...-->
<input type="button" onclick="$.fancybox.close();" value="Custom Close Button" />
</div>
</div>
<script type="text/javascript">
$('#mylink').fancybox();
$('#mybutton').click(function() {
$.fancybox({
'orig' : $(this),
'href' : '#mypopup'
})
});
</script>