How to make a sliding up horizontal DIV container using jquery? So far I have the below-provided code. The problem is that the content of <h1 id="filter_content">Content</h1> is initially not hidden. Also I've seen very nice looking sliding up menus, something like the first screenshot here. So, when user clicks on +, the content slides up. Where can I actually find a sample code or some example?
<div id="filter">
<h1>Filter</h1><br>
</div>
<h1 id="filter_content">Content</h1>
<script>
$('#filter').click(function() {
if ($("#filter").is(":hidden")) {
$("#filter_content").show("slow");
} else {
$("#filter_content").slideUp("slow");
}
});
</script>
Hiya working demo click here or Initially hidden demo here
using slideToggle API: good read http://api.jquery.com/slideToggle/ Will do the trick for the exact behavior you are looking for.
code
$('#filter').click(function() {
$("#filter_content").slideToggle("slow");
});
Related
I have a search page that takes user input from a form, then sends that information to a PHP file which sends a cURL call to an outside server. The PHP file then takes the returned array from the server and echoes some HTML to a "results" div in the original search page.
What I'd like to do is set it up so when a user clicks on one of the line items in the "results" div, a modal window appears with more information about the individual item clicked.
I know how to create a jQuery script that will process a click on a single, unique link and generate the modal window by querying the server again (through a separate PHP file that formats the modal box with the additional information and sized correctly). What I don't know how to do is handle all of this with dynamically-created content.
Here's what the first PHP file echoes:
[removed at edit; see below]
It does that for each "listing" in the array returned by the server.
Here's what I've figured out for creating the modal window when the anchor tag in the #modalLaunch div is clicked (this comes from a test page I've been using to figure out how to manipulate the modal window and its content):
[removed at edit, see below]
I'm starting to suspect that I need to abandon this method entirely and try to use an "onClick" strategy, but again I have no idea how to pass the relevant pieces of information between all the functions. Help!
EDIT:
I did a really terrible job of asking this question. I'm sorry. Here's a better representation of the code I'm using:
PHP File:
($data is the array pulled from the outside server. I've removed a bunch of the extraneous variables, so just assume they map to something sensible.)
$data = unserialize($data);
$listings = $data["listings"];
echo "<ul id='listings_grid'>";
for($i=0;$i<$data["count"];$i++)
{
$url = "/listings/".$listing_id;
echo "<li>
<a href='' target='_blank' data-listing-id='".$listing_id."'>
<div class='listing_thumb_image_container'>
<img class='listing_thumb_image' src='".$mainPhoto."'/>
</div>
<div class='listing_thumb_content'>
<br>Rent: $".$rent."
<br>Bedrooms: ".($bedrooms_count==0 ? "Studio" : ($bedrooms_count=='0.5' ? "Convertible" : $bedrooms_count))."
<br>Listing ID: ".$listing_id."
</div>
</a>
</li>";
}
echo "</ul>";
The Search Page:
(Again, pulling out a lot of excess.)
<?php
<script>
$(document).ready(function(){
$.post($("#html-form").attr("action"),$("#html-form").serialize(),function(data){
$("#search_results").html(data);
});
});
$(document).ready(function(){
$("#html-form").on('change submit',function(){
$.post($("#html-form").attr("action"),$("#html-form").serialize(),function(data){
$("#search_results").html(data);
});
return false;
});
});
$(document).on('click','#search_results li',function(){
$('.modalDialog').css('display','block','opacity','1','pointer-events','auto');
var href = $(this).children('a').attr('href');
$('#openModalContent').load(href);
return false;
});
</script>
<div id="openModal" class="modalDialog">
<div>
X
<div id="openModalContent"></div>
</div>
</div>
<div id="content">
<div id="search_form"><form></form></div>
<div id="search_results" style="margin:0 auto;"></div>
</div>
<?php include ('footer.php'); ?>
So where do I go from here? For some reason, when I plug in the options presented by the answers so far, I'm not seeing the modal box appear. It might have to do with the CSS: currently, the modal window only becomes opaque when subjected to the :target pseudo-class. Suggestions?
If you want your dynamically generated content to be able to do stuff try this if your using JQuery 1.9 and above:
$(document).on('click','#openModalContent li',function(){
var href = $(this).children('a').attr('href');
$('#yourModalBox').load(href).show(888);
return false;
});
Add a data-listing-id attribute to the anchor in your generated HTML:
<a href='".$url."' target='_blank' data-listing-id='".$listing_id."'>
and use that attribute inside your click handler like:
$('#modalLaunch a').click(function(){
$('#openModalContent').load('/listings.php', {id:$(this).data("listing-id")});
});
https://www.codeigniter.com/user_guide/tutorial/index.html
Visit that link and look for the table of contents button at the upper right of the page. I want to apply that to the webpage I am making.
What do you call that design technique? Any links for tutorial on how to do it? Thank you very much.
To create that menu you can use css and jquery. Create a div with
position:absolute;top:-400px;width:auto;height:430px;
and you animate it with jquery. At click, set top:0px. You can use also animate jquery function.
LE:
$(document).ready(function(){
$('div a').click(function(){
$(this).parent().css('top','0px');
$(this).addClass('opened');
$(this).click(function() {
if($(this).hasClass('opened')){
$(this).parent().css('top','-280px');
}
})
});
});
<div style="width:100%;background-color:red;position:absolute;height:300px;top:-280px;"></div>
It's a sample code. From here you can edit it and you can animate it. Good luck!
Hi does anyone know if you can control a div thats encased in php like the one below?
I want to try and find a way of using javascript to fade the div in after a 3 second delay when the page loads?
Can anyone show me a way of doing this?
i would imagine its something like this:
<script>
jQuery(document).ready(function($){
$('.dashboard_intro').hide().delay(2000).fadeIn(2000);
$('.dashboard_intro_arrow').hide().delay(2000).fadeIn(2000);
$('.dashboard_intro_text').hide().delay(2000).fadeIn(2000);
$('.exit_intro').hide().delay(2000).fadeIn(2000);
});
</SCRIPT>
<?php
$dashboard_intro = dashboard_intro();
while ($intro = mysql_fetch_array($dashboard_intro))
if ($intro['dashboard_intro'] == '0') {
echo "<div class=\"dashboard_intro_arrow\"></div><div class=\"dashboard_intro\"></div><div class=\"dashboard_intro_text\"><strong>Welcome to Your Dashboard</strong><br/><br/>These are your tools: Check Messages, Reviews & more.</div><div class=\"exit_intro\"></div>";
} ?>
PHP is run on the server and doesn't affect what jQuery does later in the browser. What does the rendered HTML look like? Something like your example code should do just fine. What's the problem, exactly? Here's a simple demo:
http://jsfiddle.net/tXhwH/1
<script>
$(function() {
$('.dashboard_intro_text').delay(3000).fadeIn(2000);
});
</script>
I know I will butcher this question, so here goes. I have never been able to get UI-tabs to work with ajax. My problem is this.
The tabs work and appear correctly. The desired linked to content is present. However their is a huge space underneath the tabs that firebug tells me is the UL. My actual content the LI is under the long space(and apprently out of the scope of the UL) and is now a DIV.
May be observed at This link . Scroll down just a little and its on the right column.
My jquery is
$('#example').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
My html
<div id="example">
<ul>
<li><span>Palin</span></li>
<li><span>Beck O Mania</span></li>
<li><span>On The Left</span></li>
<li><span>On The Right</span></li>
</ul>
</div>
As far as the tabs appearing correctly I could use just the regular
$( "#tabs" ).tabs();
and it comes out the same
I have had this problem every time I have tried to use tabs with Ajax and would like to know what I am doing wrong. thanks for your time
I spent about hour and did not find any clue how to highlight my div.
Ok example my code.
1.proccess.php
$_SESSION['msg']='<div class="success">Your account has been updated</div>';
header("location:http://domain.com/account.php/");
2.account.php
if ($_SESSION['msg']!="") {
echo $_SESSION['msg'];
unset($_SESSION['msg']);
}
Now I want the javascript or jquery to highlight the <div class="success"> on account.php. How to do that? Let me know :)
jQuery UI has a highlight effect:
$(document).ready(function() {
$('div.success').effect("highlight", {}, 3000);
});
The above code will need to be loaded into the page containing your div, along with jQuery, jQuery ui.core.js and effects.highlight.js
You probably were looking for this:
http://docs.jquery.com/UI/Effects/Highlight
That's the highlight effect which "focusses" your attention. So "focus" was just the wrong search term to go for?