Is it possible to use jquery to use a callback in a div and show the full text in another div? Currently I have in the right div:
$(document).ready(function(){
setInterval(function(){
$.post("status.php?_="+ $.now(), {day : "<?php echo $day;?>"}, function(upcoming){
$(".ticker").html(upcoming);
}),
"html"
}, 45000);
});
And I need something like:
$(".view").hover(function(){
$("#left").load("a.php");
});
<div id="left">
<div class="show">
</div>
</div>
<div id="right">
<div class="ticker">
</div>
</div>
My php spits back html: EventID
What I want to do is hover over the hyper link and have the full status shown in .show
I know I'll have to do a query with the event number, but my search in doing this comes up empty. As always, any help is appreciated
$("body").on("hover", ".view", function(){
$("#left").load("a.php");
});
As you're adding .view to DOM after page load i.e dynamically so, you need delegate event handler for dynamic element using .on().
And instead of body you can use any parent selector of .view which is static-element.
Related
I have set up a page with modal's but at the moment it only works with having one modal on the page.
What I would like to achieve is apply id in the Jquery so each modal has it's own ID and opens with multiple modals.
HTML:
<a class="activator1" id="activator1"><img class="edit_icon" align="right" src="/images/edit_icon.png" alt="">Edit</a>
<div class="box1" id="box1">
<h3>Title here</h3>
<p>Text in here</p>
</div>`
<a class="activator2" id="activator2"><img class="edit_icon" align="right" src="/images/edit_icon.png" alt="">Edit</a>
<div class="box2" id="box2">
<h3>Title here</h3>
<p>Text in here</p>
</div>
Jquery
$(function(){
$('#activator').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'top':'80px'},500);
});
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-1400px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
Don't use unique classes, keep them common for common elements. Use secondary classes if needed for styling
A simple data attribute can be used for the target and can be read using data() method
<a class="activator" id="activator1" data-target="#box1>
Then use class for click handler selector
$('.activator').click(function(){
// "this" is element event occurred on
var modalTargetSelector = $(this).data('target');
$('#overlay').fadeIn('fast',function(){
$(modalTargetSelector ).animate({'top':'80px'},500);
});
});
Similarly for close buttons use common class and do something like:
$('.boxclose').click(function(){
$(this).closest('.box').animate({'top':'-1400px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
Hey folks I have content being displayed on a page by using jQuery and Ajax to query my php page. On click I check for all elements with the class edit. I am trying to then grab the unique id of the link that was chosen. I know it should be this.id but it returns nothing. Does anyone have any insight on how to dynamically check the clicked link and get a stored value in any way?
The bellow works for getting a link clicked. but cannot get the id still.
$("body").on("click", ".edit", function(){
var id = this.id;
alert($(this).val());
});
Here is the HTML that is being put on the page via Ajax
<div class="row">
<div class="small-2 large-2 columns">3</div>
<div class="small-10 large-6 columns">Andrew</div>
<div class="small-6 large-2 columns">2013-08-12</div>
<div class="small-6 large-2 columns edit"> Edit </div>
</div>
Solved solution was to use '.edit > a' as the selector. I had edit as the class of the div, not the anchor tag. Thanks for all the help folks!
The sample HTML helped:
You need to select the anchor within the .edit div.
$("body").on("click", ".edit > a", function () {
var id = this.id;
alert(id);
});
JSFiddle: http://jsfiddle.net/QckbT/
Does this works ?
$("a.edit").on("click", function(){
alert($(this).val());
});
alert($(this).val());
relate to body, not to #id.
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
<div id="nav">
a link </div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
HTML:
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
Html
Show content 1
Show content 2
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
Using jQuery, you could do something like this.
This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
Some page
Some other page
My page
</div>
<div id="content">
show the stuff
</div>
Something like this:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
a link
to show a hidden div (i think this is what you wanted)
the javascript (using jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
Show the Div
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here
I want to call a PHP page when the user is clicked on a <DIV> using AJAX. At the same time I want to change the Text of the DIV as LOADING.....
I don't know much about AJAX, so please give me details about that also.....
Thanks in advance......
Using jquery you can do
$("div#id").click(function(){
$(this).text("Loading...").load("/path/to/file.php");
});
<div onclick="send_ajax_request(); document.getElementById('loading').style.display = 'block';">
<div style="display: none" id="loading">Loading ...</div>
</div>
send_ajax_request() is your function to call the ajax request. the 2nd statement will make the inner div visable (style="display: none" will make it invisible by default).
Do something like.
< div class="loader" id="ajaxloaddiv">Initial data</div>
In ajax function use :
$('#ajaxloaddiv').click( function() {
$(this).text("Loading...");
...
... do processing here
...
return false;
});
I am trying to add a new div to the page when you click on NEW DIV?
How could I do this? Can someone point me in the right direction?
More example code is always helpful, but I'll try to give you some basics.
<div id="Content">
<button id="Add" />
</div>
$(function () {
$('#Add').click(function () {
$('<div>Added Div</div>').appendTo('#Content');
});
});
There are a bunch of different ways, it depends on what you want to do. A simple way is like this:
$('#id').html('<div>Hello</div>')
Which replaces the inner html of item with id 'id' with "Hello". So this:
<div id='id'>Old Html </div>
Would become:
<div id='id'><div>Hello</div></div>
And this:
$('#id').after('<div>Hello</div>')
Would transform the "Old Html" into this:
<div id='id'>Old Html</div>
<div Hello </div>
Check out www.visualjquery.com and select the Manipulation button. It gives you more than you could need to know in an easy to explore fashion.
Make sure to use the $(document).ready function in jQuery. You need this to "run" the script once your page is loaded and enable the action that is being called on this dummy button to append a new div to an existing div.
You can also use this to append anything you'd like to other elements on the page by using jQuery selectors such as .class or #id.
<div id="Content">
<button id="Add" />
</div>
$(document).ready(function() {
$('#Add').click(function () {
$('<div>Added Div</div>').appendTo('#Content');
});
});
Another useful option is to replace the contents of a tag with jQuery. You can do this using the .html() function.
<div id="Content">
<p id="changed">Hello World!</p>
<button id="change_content" />
</div>
$(document).ready(function() {
$('#change_content').click(function () {
$('#changed').html('Goodbye World');
});
});
Hope this helps!