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).
Related
Please I'm new to coding and I have a project i am working on.
I have a php while loop code that diplay 5 posts
I also have a jQuery code to display modal for the while loop with post url
The problem I'm face here is that the displayed url is inside a div
<p id="url"></p> this show the url
I want to add it as url.
I have tried </p>'> Click to view
But the link will not show
I have tried echo it still not showing.
I have been on this for two days now
The modal that display the content is outside the while loop and working
I need help
My ajax code
<script>
function showModal(id)
{
$("#url").text($("#url_"+id).text());
}
</script>
Php loop code
`<?php
foreach ($posts as $key => $result) { ?>
<div href="#" data-toggle="modal" data-target="#myModal" onClick="showModal(<?php echo $id ; ?>)" class="side-icon share-btn">
<i class="fa fa-share share-icon"></i> View link
<?php } ?>
<div class="modal fade" id="myModal" role="dialog" >
<div class="modal-dialog" style="position:absolute;bottom:0;margin:0;width:100%;">
<div class="modal-content">
<div class="modal-header">
<center><h4>Share with friends</h4></center>
<?php $t='<p id="name"></p>';
$t1?>
. Click to view
</div>
`
The id containers the url from MySQL table
The issue I'm facing is that, <p id="url"></p> is just showing www. example.com as plain test on user view but can't make it work as link to click
A hyperlink a is not necessary to invoke the modal dialog - most DOM elements can invoke whatever function you like. You assign an event listener either to all nodes of interest or a delegated listener bound to a common parent element. The snippet below might be of use?
// add delegated listener on the containing node that has the content that is to be clicked
// by the user to invoke the modal dialog.
document.querySelector('div.urls').addEventListener('click', function(e) {
// Only process nodes that are not the specified target itself. ie: it's children
if (e.target != e.currentTarget) {
let modal=document.getElementById('myModal');
// add the content from the clicked node to the modal somewhere
let link = modal.querySelector('a[data-id="modal-target"]');
link.setAttribute('href', e.target.textContent);
link.innerHTML = 'Click to view';
}
});
.url:hover {
color: red
}
.url {
cursor: pointer;
}
<div class='urls'>
<p class='url'>https://www.example.com</p>
<p class='url'>https://www.banana.com</p>
<p class='url'>https://www.bogus.org</p>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="position:absolute;bottom:0;margin:0;width:100%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header"></div>
<a data-id='modal-target'></a>
</div>
</div>
</div>
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
I created a menu with links (#) which aims to show & hide a div thanks to the onclick attribute.
For example the link "home" can hide/show the div "contentHome", the link "contact" can hide/show the div "contentContact".
The problem I have is that the container div "content" includes the div "contentHome" and "contentContact" when i click on the 2 links one time...
Here is a part of my code :
<li><a href="#" onclick="toggle('contentHome');" ><?php echo $lang['MENU_ACCUEIL'];?>
<div id="content">
<div id="contentHome">
<img src="Images/photo.jpg" class="imgphoto" alt="Simplepic" />
<?php echo $lang['TEXTE_ACCUEIL'];?>
<img src="Images/work.png" class="imgwork" height="100" width="100" alt="Travaux" />
<?php echo $lang['TEXTE_SOON'];?>
</div>
<div id="contentContact">
...
</div>
</div>
The position is static, I can't put a z-index and when I put display:none;, divs don't want to load.
What do you think ? I just wanted to create a dynamic menu with div but the php includes makes me struggle...
Here i've created some example of toggle with divs.
<li>Toggle Red</li>
<li>Toggle Blue</li>
<div id="content">
<div class="toggled-item" id="contentHome">
<div style="width:200px; background-color:#f00; height:200px;"></div>
</div>
<div class="toggled-item" id="contentContact">
<div style="width:200px; background-color:#00f; height:200px;"> </div>
</div>
</div>
<script>
$(document).ready(function(){
$("#lnk_contentHome, #lnk_contentContact").click(function(){
$(".toggled-item").hide();
var target = $(this).attr("id").split("_")[1];
$("#" + target).toggle();
});
});
</script>
https://jsfiddle.net/ow7dd12f/5/
Hope helps.
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);
}
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.