I have in my webpage this html popup:
<div class="popup1" id="popup_calendar">
<div class="bg_popup"></div>
<div class="content_popup">
<div class="popup_content">
<h2>Content Detail</h2>
<div class="content_scroll scroll-pane">
<div class="clearfix">
<h3 class="left">Title...</h3>
</div>
<h4>Place: ...</h4>
<h4>Date: ...</h4>
<h4>Hour: ...</h4>
<h4>length: ...</h4>
...
...
...
Inscribirme
</div>
</div>
</div>
And I need to open it with a click but content depends on other data.
How can I open my popup (after load necessary data) and edit it so that I can show it correctly? (I need to fill place, date, hour, length, etc...)
Thank you very much in advance.
put .slideDown() in load() callback:
$('#popup_calendar').load(page, function ()
{
$('#popup_calendar').slideDown(1000);
}
Related
I split my body content in two parts. The left one has a map and buttons. When I click on the button, I get the result from Arad.php in another window.
How can I set the target to the second half (split right) of my body?
<body>
<div class="split left">
<div class="centered">
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="Harta_Romaniei.jpg" alt="Harta_Romaniei" style="width:100%">
<button class="btnarad"; onclick= "window.location.href='Arad.php'"; Target="split right">Arad</button>
<button class="btntimisoara">Timisoara</button>
</div>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>Information</h2>
// I want the information here!
</div>
</div>
</body>
It doesn't have much to do with PHP, you should really do it with HTML + JavaScript.
The window.href.location will always redirect you to another route, and will never do what you want.
You'll need something like this: Simple Load an HTML page from javascript based on window width
Using dom I want to get content from some specific div.
My Current situation is this : I want to get content from site link whose html structure is as below. I want that css class data for my local database. I think this is possible only using dom.
Here is the code :
<div class="listing-info-right ">
<div class="list-card-field name-address">
<div class="list-card-user">
Mr Bimal Kumar Agarwal
</div>
</div>
<div class="list-card-field name-address">
<div class="list-card-phone">
+91-9386750700,+91-612-2530310,+91-612-2530311
</div>
</div>
<div class="list-card-field name-address">
<div class="list-card-email">enquiry#elementguestline.com</div></div>
<div class="list-card-field name-address list-card-border">
<div class="list-card-location">28,, Nalini Aparment 4th Floor, Kidwaipuri, Fraser Road, Patna, 800001, Bihar</div>
</div>
</div>
I want to fetch data of div class named : list-card-user, list-card-phone and list-card-location.
Before I had done coding using dom with css id, but could not get anything with class name..!
Please help me with some code.
Thanks in Advance.
You can select your div with document.getElementsByClassName in Javascript. This will return an array of all the elements with that class, if you only have one occurence then simply get the first node.
var div = document.getElementsByClassName("list-card-user")[0];
The div variable now points to your div, you can use a bunch of functions on it to get different things. For example, if you want its content, you can do this :
var content = div.innerHtml;
Edit I used Javascript because your original question used the Javascript tag, which has been removed now with an edit.
This is the simple one, perhaps this helps you :)
<div class="listing-info-right ">
<div class="list-card-field name-address">
<div class="list-card-user">Mr Bimal Kumar Agarwal</div>
</div>
<div class="list-card-field name-address">
<div class="list-card-phone">+91-9386750700,+91-612-2530310,+91-612-2530311</div>
</div>
<div class="list-card-field name-address">
<div class="list-card-email">enquiry#elementguestline.com</div>
</div>
<div class="list-card-field name-address list-card-border">
<div class="list-card-location">28,, Nalini Aparment 4th Floor, Kidwaipuri, Fraser Road, Patna, 800001, Bihar</div>
</div>
</div>
Output:
<div id="myNamez"></div>
<div id="myPhonez"></div>
<div id="myLoc"></div>
Using jQuery:
<script>
$(document).ready(function () {
var namez='list-card-user';
var phonez='list-card-phone';
var locationz='list-card-location';
document.getElementById('myNamez').innerHTML='namez';
document.getElementById('myPhonez').innerHTML='phonez';
document.getElementById('myLoc').innerHTML='locationz';
});
</script>
Here's the demo
i need help to passing row from mysql database into div popup window?
how do i passing product id into popup div which i called through View?
For Example I Want Like This
i want to fetch product details into `product quick view popup window`
through product `ID`?
Here My Code
<div class="latest_products_sec">
<div class="latest_products">
<div class="title_box">
</div>
<!--Latest Products Slider -->
<div class="latest_pro_box">
<h4>Latest Shirt's Collection</h4>
<div class="latest_products_slider">
<?php
$queryshirt=mysql_query("select image,id from products
where cid='1' LIMIT 5") or die ('die shirt query');
while($rowshirt=mysql_fetch_array($queryshirt))
{
echo '<ul>';
echo '<li><img src="admin/'.$rowshirt['image'].'"
width="225" height="300" alt="" />
View</li>';
echo '</ul>';?>
}
?>
#shirt Div Popup Window
<div id="shirt" class="proquickview">
<span class="close_btn" onclick="parent.jQuery.fancybox.close();">Close</span>
<h2 class="title">quick view</h2>
<div class="quickviewinfo">
<?php
// I Need To Get ID Here
echo $id=$_REQUEST['id'];
?>
<div class="quickviewinforight">
<div class="titlerow">
<h2>Latest Shirt's Collection</h2>
<div class="start_ratings">
<div class="start_rating">
</div>
</div>
<div>
<div class="quick_review">
<h3>Quick Discription</h3>
<p>TEST.</p>
</div>
<div class="qty_row">
<div class="qty_field">
<label>Select Quantity</label>
<span>
<select name="S">
<option>5</option>
</select>
</span>
</div>
<br class="clear" />
<span class="total_price">Price <strong>$88.00</strong>
<del>$102.00</del></span>
ADD TO CART
</div>
<div class="total_price_row">
</div>
</div>
</div>
</div>
Javascript For Popup Window
$(document).ready(function() {
$(".view_btn").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
$(document).ready(function(){
// Cufon Functions //
Cufon.replace ('.latest_products_slider ul li a.view_btn',{hover:true});
});
It's hard to tell what is wrong as you have only given part of the story.
Fundamentally you need:
Action by the user (usually a click) triggers AJAX call sending a unique ID onclick="updatefunction(this.id) in a SPAN or DIV will do the trick:
<SPAN onclick="updatefunction(this.id)" id="1234">Your Stuff to update</SPAN>
The JS function updatefunction must send the detail/ID to a separate PHP script (you can use the original but this just makes it clunky) which queries your database on the ESCAPED data you send.
Once the data is ready, the JS will update the window/pop it up.
AFAICS you are missing the extra bit that actually does the querying or not applying a suitable onclick.
Why not have a look at the excellent W3Schools Ajax tutorial - it will help though does not use jQuery.
I have some HTML menus, which I show completely when a user clicks on the head of these menus. I would like to hide these elements when the user clicks outside the menus' area as well as clicking on myaccount section again.
Here is the code,
<li onclick="san()">
<div id="topnav"><a id="displayText" href="#" class="signin">My Acount</a></div>
<div id="topnav1" style="display:none;"><a id="displayText1" href="#">My Acount</a></div>
</li>
<div id="signin_menu" style="display:none;">
<div class="droptop"></div>
<div class="maindropsign">
<div class="header_box">My Acount</div>
<div class="txt_drop">My Profile</div>
<div class="txt_drop">My Backer History</div>
<div class="txt_drop">Edit Settings</div>
<div class="txt_drop_log">Log Out</div>
</div>
<div class="dropbut"></div>
</div>
<script language="javascript">
function san()
{
if(document.getElementById('signin_menu').style.display=='')
{
document.getElementById('signin_menu').style.display='none';
document.getElementById('topnav1').style.display='none';
document.getElementById('topnav').style.display='';
}
else
{
document.getElementById('signin_menu').style.display='';
document.getElementById('topnav1').style.display='';
document.getElementById('topnav').style.display='none';
}
}
</script>
Please help me to do this.
You have to remember the state of the menu first, like set var open = true when its open. Then make a function that 'toggles' and bind that to the onClick event of your menu-head. Then either bind a closeMenu function on an onClick event directly to your whole document or on an onMouseOut from your menu (you can even build a delay here).
i have a section in my website that needs to be toggled by clicking on the title .
now i wrote this code to toggle when clicking on title
$(document).ready(function(){
$(".toggle_container").hide();
$("h4.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
html part :
<h4 class="trigger">'.$row[title].'</h4>
<div class="toggle_container">
<div class="block">
'.$row[text].'
</div>
</div>
now with these codes everything goes fine , untill it just opens every title clicked and not closes opened ones ;
1st
now i have to change this script in a way that when i click on a title to toggle first check opened ones and close those first
2nd
and the other thing im wondering is how to make the first title to be opened already ,
when the page loaded the first title to be opened
thanks in advance
I was hoping one of the other answers would update and fix this, but both of them never toggle, they always show, here's how to toggle and hide the others like you want:
$(function(){
$(".toggle_container:gt(0)").hide();
$("h4.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow")
.siblings(".toggle_container").slideUp();
});
});
You can try out a demo here, it shows the first on load, and correctly toggles the rest.
This should do it I guess
$(document).ready(function(){
$(".toggle_container").hide();
$(".toggle_container:first").show();
$("h4.trigger").click(function(){
$(".toggle_container").hide();
$(this).toggleClass("active").next().slideToggle("slow");
});
});
Html
<h4 class="trigger">Title1</h4>
<div class="toggle_container">
<div class="block">
Test
</div>
</div>
<h4 class="trigger">Title2</h4>
<div class="toggle_container">
<div class="block">
Test
</div>
</div>
<h4 class="trigger">Title2</h4>
<div class="toggle_container">
<div class="block">
Test
</div>
</div>
Javascript
$(document).ready(function(){
$(".toggle_container:gt(0)").hide();
$("h4.trigger").click(function(){
$(".toggle_container:visible").slideUp('slow');
$(this).toggleClass("active").next().slideToggle("slow");
});
});
You can check working demo at http://www.jsfiddle.net/XnV69/3/