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);
});
Related
Hope you well,
I'm trying to make something like this,
firstly, it'll show this
and after, clicking this "menu" image, It'll show something like this
So, I've made some container using <div> here:
<body>
//this is my menu container..
<div class="menu_pos_jquery">
<a class="btn1" href="#"><img src="logo/menu_logo.png" style="height: 70px; margin-left: 850px; margin-top: 15px;" onmousedown="return false;" alt="Menu" /></a>
</div>
//here is my another container which i would like to open using Jquery after click menu container..
<div class="menu_pos_jquery2">
</div>
</body>
So i did tried using this code:
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeIn();
});
});
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeOut;
});
});
</script>
But it's not working, When i run this program, but it shows full page like what i provide you a second pic .. And i want to show only first menu and after click menu it must suppose to show my another container, how to do it? pls, help.. and sorry for my bad English!! .. hope you understand my question.
You should change your code into this:
$(document).ready(function(){
$(".menu_pos_jquery2").fadeOut();
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeToggle("slow");
});
});
Maybe you want this
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery").fadeOut("normal",function(){
$(".menu_pos_jquery2").fadeIn();
});
});
});
You have registered two click event handlers to the same element, so when ever you click the button, both will be called. But only one should be called at a time.
Adding and removing a class to the .btn element would be a good option, as you can also specify CSS w.r.t the state. Please consider the following
$(document).ready(function(){
$(".btn1").click(function(){
var isMenuOpen = $(this).hasClass("open");
if(isMenuOpen){
//if already open, close it
$(this).removeClass("open");
$(".menu_pos_jquery2").fadeOut();
}else {
//if not open, open it now
$(this).addClass("open");
$(".menu_pos_jquery2").fadeIn();
}
});
});
I want to hide my homepage content after other link is clicked. My homepage content is into
<div class="active">
Homepage content
</div>
css class active and inactive
.active {
margin-top:230px;
font-size: 30px;
color:black;
}
.inactive
{
opacity:0;
}
I tried this script but it is not working.
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$(this).removeClass("active").addClass("inactive");
});
</script>
I upload it to an web hosting so you can see full html code here and full css file here
$(this).removeClass("active").addClass("inactive");
Is adding and removing the class from your link (which I assume has id="#link-link1)
Instead you need to give your div an id like
<div id="homepage" class="active">
Then in your JS code reference that by id:
$('#homepage').removeClass("active").addClass("inactive");
Even better would be to use jquery's hide() method or toggle() if you wanted it to come back the next time you clicked:
$('#homepage').toggle();
Add an ID to the "Homepage content" div, so we can find it using javascript.
<div class="active" id="contentArea">
Homepage content
</div>
Try placing you jQuery code inside a document read. Optionally place it right before the closing </body> tag. Add the css classes to the "Home content" div and not to the link element addressed by $(this):
$( document ).ready(function() {
var contentArea = $("#contentArea");
$("#link-link1").click(function(){
contentArea.removeClass("active").addClass("inactive");
});
});
Consider using the jQuery function toggle() for changing contents visibility.
Take a look at the manual: http://learn.jquery.com/
Just take a look at that fiddle I make a simple example for you.
In you'r web page you must use better div elments as tabs not a elements
Code:
$("#random_link").click(function(){
//$(".active").css("display","none"); //WORKS TOOO
$(".active").fadeOut();
})
Working Fiddle
HTML
<a id="link1" href="#">Hide Home Page</a>
<a id="link2" href="#">Show Home Page</a>
<br/>
<div id="home_page">
<hr/>Homepage content
<hr/>
</div>
jQuery
$('#link1').click(function () {
$('#home_page').hide();
});
$('#link2').click(function () {
$('#home_page').show();
});
Hope this helps..!!
Update using toggle() based on #Cfreak answer
Updated Fiddle
Since you are using Jquery you can use hide method that will apply to your css of that element display: none;
$('#homepage').hide();
$('#homepage').show(); //to make it visible again
hope it help
You have to change the class for the div, in your code you are change the class of the link, add an Id or class to the div, for example:
<div class="active" id="test">
Homepage content
</div>
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$('#test').removeClass("active").addClass("inactive");
});
</script>
My page is at www.danielcw.info.
At the bottom I am calling:
$(document).ready(function() {
$("#single_1").fancybox({});
});
On:
<div id="single_1">
TESTTESTEST
</div>
Nothing happens. Can anyone please explain where I am going wrong, I see all the JS and CSS loaded and on the page.
Thank you,
Daniel
Typically, Fancybox is initialized on an anchor tag which points to a div element or a link housing the content to be shown on the Fancybox:
HTML:
Click here to launch Fancybox
<div style="display:none">
<div id="single_1">
Content goes here
</div>
</div>
Javascript:
$(function(){
$('a#fancybox').fancybox({
// Fancybox options here
})
.trigger('click'); //Optional - if you wish to trigger the Fancybox after initialization
});
Try using,
$(document).ready(function() {
$("a #single_1").fancybox();
});
<a id="single_1" href="#">
TESTTESTEST
</a>
You've merely instantiated the plugin. You have to trigger it now.
So you can add any DOM element and watch for an event then trigger the plugin.
Click me
The JS
$('fancyme').on("click", function() {
$.fancybox('#single_1');
});
OR
You can trigger on page load
$(function(){
$.fancybox('#single_1');
});
my site has 2 pages both have hyperlinks to each other but when user click on that hyperlink I just need a certain div of that page to be replaced by certain div on other page, please guide me how to program it.
structure
page1.html
<div id="no_replace">
page 2
<div id="replace">
//page one stuff
</div>
</div>
page2.html
<div id="no_replace">
page 1
<div id="replace">
//page two stuff
</div>
</div>
so on page one when usr clicks on link "page two" ... I want the 'replace' div of page one to be replaced by 'replace' div of page2.html and there should be fade in and fadeout
Use the load() method.
$('a').click(function(){
$('div').load($(this).attr('href'));
});
Try this in Page1.html
$(function(){
$("a").click(function(){
$.get({url:"page2.html",
success: function(data){
$("#replace").html($("#replace", $(data)).html());
}
});
});
});
first give your link an id or class. I'm going to call it .loadpage
$('a.loadpage').click(function(e){
e.preventDefault();
var div = $('#replace');
div.fadeOut(300).load($(this).attr('href'), function(){ div.fadeIn(300); });
});
First you need to stop the default behavior of the link by doing e.preventDefault(). Then you need to use the load() method to bring in the contents of the page you're trying to load.
I just figured out how to use Facebox. I can open hidden divs in Facebox but how do I get it to dump the current div and load another one without closing the pop-up? I want the Facebox pop-up to load another div (while dumping the previous one) if the user clicks on a link inside the pop-up. I already tried something like this:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({})
})
</script>
Div1
<div id="div1" style="display:none;">
Load the other div
</div>
<div id="div2" style="display:none;">
<p>Other div</p>
</div>
I somehow knew it wasn't this simple. I already tried searching the net for answers but no dice. Is this even possible? I'm a complete noob when it comes to Javascript so please bear with me.
I found the answer already. Apparently, you need to bind it to a mouseclick event and perform recursion. Here's how I did it:
<script type="text/javascript">
function find_hidden(){
$('.infinite')
.unbind('click')
.bind('click', function() {
var glink = $(this).attr('href');
jQuery.facebox({div: glink});
find_hidden();
});
}
</script>
I found the answer here.
From skimming through the source, I think you can just pass a string, like this:
$.facebox('<div>test</div>');
Try this:
jQuery("#facebox_overlay").click();jQuery.facebox({ div: '#your-new-div-id' });