I have a php condition and need two different images to potentially display. Is there some way to create two different titles for different classes? Or maybe a different way in the jquery? Right now I changed the CSS background img of my dialog box to a custom one. Is it possible to somehow delete this background attribute for the title div when the pop_out div is present? Not sure you need to see it but my php is something like below, and I need a different title for both situations, and really am just lost at the moment on how to do it. Thanks
if ($out_of_stock != 'Y') {
<div id="pop_in">
</div>
} else{
<div id="pop_out">
</div>
}
Was actually easy just added this in the ajax call after my dialog call
if ($('#pop_out').length){
$('.ui-dialog-titlebar').css('background', 'none');
}
Related
I am not ever sure this is possible but I know you guys will know the answer.
I wonder if it is possible to load the first div on a page into a different page.
Example:
This code is on "list.php"
<div class="message_details">
Some Content 1
</div>
<div class="message_details">
Some Content 2
</div>
I found this article and it works but it brings in all div's but I want to load only the first div.
Load content from external page into another page using Ajax/jQuery
Here is the code I have now that loads all divs
$(document).ready(function() {
$(".loader").load('list.php .message_details');
});
How can I load only the first div? Also is there any way to remove an img tag within the selected div?
Thanks everyone
Use the :first-child selector
$(".loader").load('list.php .message_details:first-child', function() {
$(this).find("img").remove();
});
Reference
simply echo the the div in the second page. Give each div an id, then echo that. (unless i am misunderstanding your goal)
I have a list of links which when clicked opens a link's corresponding DIV. These div's are hidden by default using both jquery .hide() and css display:none.
These divs all contain a php include to a file with a jquery product zoomer in, and because of the way I've made it, only the first one works and the div's below in the source order fail to work (they are included, but the jquery doesnt work) as I'm assuming it conflicts.
I'd love to be able to fix this apparant conflict, but haven't a clue what the issue may be, and as the site is "secret" I can't show the source here without giving away what it is.
So, i was thinking - instead of including these files via php, have them load in when the link is clicked, so only one of these includes is in the page at any one time!
Is this possible using jquery and some php?
--- edit ---
On further investigation - thanks to some of your comments below, it looks like jQuery's .load() looks suitable, but won't work for me. Here is my jQuery:
`
$('.urbaneCarousel li.dowrImg').click(function(){
$('ul.urbaneCarousel').hide();
$('.dowrDiv, .dowrDiv div').show();
$('.dowrDiv .insert').load('path/to/dowr.php');
return false;
});
`
Any advice? I'm 100% certain the path/to/ part is correct.
JQuery .load http://api.jquery.com/load/ | I guess you have to try to play with .load =)
It sounds like you might have some conflicts between those php files. it shouldn't be an issue to include different php's into your hidden divs at all. In any case, couple ways you can do this:
Include all your content via php upfront and simply show the divs on the browser (sounds like what you're doing)
< div id='mydiv1' style='display:none'>
< ?php include('myfile1'); ?>
< /div>
< div id='mydiv2' style='display:none'>
< ?php include('myfile2'); ?>
< /div>
etc.
Then, on some click event, you would do $("#div1").show(), etc.
or
2) simply create your divs empty and bind click events to the .load or .get calls for specific divs
so let's say you have two buttons btn1 and btn2 for those divs.
$('#btn1').bind('click', function() {
$("#div1").get('myfile1');
$("#div1").show();
});
The only problem with the second solution that it will go to the server to fetch data every time button is clicked.
UPDATE
try specifying full path in your .load or .get just to be safe. That might be giving you problems too. Here's a quick example (I am using codeIgniter, thus base_url() reference)
$('#btn_trigger').live('click', function(){
$("#dowrInsert").load("<?php echo base_url();?>auth/index");
});
<input type='button' value='Trigger' id='btn_trigger'/>
<div id="dowrInsert">
My text
</div>
This works fine
Well, I managed to resolve the conflict which was leading to me needing to use the .load() method.
I'm sure there was something within my wordpress theme which was causing this to mess up, so thanks to all those who helped me looking for ways round this, but I managed to accidentally fix my initial conflict in any case, so no longer need the .load() method as a workaround.
Here's a somewhat complex puzzle, I'd love some feedback on how others would approach this.
This site is basically a free regional news blog. The image at the bottom demonstrates the layout (ignore the date overlap glitch). It's coded in PHP, jQuery and xajax.
My question has to do with dynamic content loading. As is, on page-load, I assign the arrows to the URL of the prev/next articles. No prob. The URLs are friendly, the page reloads to the next article, and I can cycle through them all day long.
But ... I'd like to turn the arrows into a slider (not an href) with the following behavior:
Clicking the right arrow will ...
Begin loading the new content offscreen via xajax,
Cause the old content to slide left (from onscreen to offscreen)
flush with the new content also sliding left (from offscreen to
onscreen).
Why? Sliders are awesome, and I think it would look pro. And this is basic slider stuff (like this jQuery scrollLeft slider) except with content being dynamically loaded on click of the arrow, which raises some questions:
What's the best approach for this?
Do I use PHP to pre-populate ALL empty hidden article DIVs?
Do I use jQuery to append/prepend/remove article DIVs with each arrow click?
What would the jQuery "scrollLeft" offset look like? The content DIV is static width, but would I be better off with jQuery scrollTo?
I hope my question is clear ... Any suggestions would be most appreciated!
Here's the solution I came up with.
http://jsfiddle.net/tXUwZ/
If anyone has ideas on how to clean it up or make it tighter, please let me know!
Many thanks to #Jamie for the push in the right direction!
You have two options in my opinion:
Populate each slider on page load so that a jQuery click function animates the content
Populating the data on a per slide basis using an AJAX call
If it's only a few items/slides, then I'd populate on page load. If you're looking at lots of slides (which you might expect with a daily news blog) or if each slide will contain a lot of data (such as high-res images, etc.) I'd go with the second option.
The second option is easy to do. All you'd need is three divs (one for the onscreen slide and two for the flanking offscreen slides that will 'replace' the onscreen one when either arrow is clicked). I'd use something like this:
<div class="container">
<div class="inner-container">
<div class="back"></div>
<div class="content off_screen_left" id="1"></div>
<div class="content on_screen" id="2"></div>
<div class="content off_screen_right" id="3"></div>
<div class="next"></div>
</div>
</div>
And the required CSS:
.container{width:200px;height:150px;overflow:hidden}
.inner-container{width:600px;height:150px;margin-left:-200px}
.content{float:left;width:200px;height:150px}
And as for jQuery:
$(".next").live('click', function(){
var current_id=$(this).prev(".on_screen").attr("id"); // get current page ID
$(".content").css("float","right"); // float all elements to the right
$(".off_screen_right").animate({display:none;}); // make the furthest right disappear gradually
$(".on_screen").attr("class","off_screen_right"); // make on_screen the new off_screen_right and add the correct ID attribute
$(".off_screen_left").attr("class","content on_screen"); // make off_screen_left the new on_screen
$(".container").prepend('<div class="content off_screen_left" id="'+current_id-1+'"></div>'); // add the new off_screen_left element and add the correct ID attribute
$(".off_screen_left").load("load-content.php?page_id="+current_id-1); // populate the new off_screen_left element
});
$(".back").live('click', function(){
var current_id=$(this).next(".on_screen").attr("id"); // get current page ID
$(".content").css("float","left"); // float all elements to the left
$(".off_screen_left").animate({display:none;}); // make the furthest left disappear gradually
$(".on_screen").attr("class","off_screen_left"); // make on_screen the new off_screen_left and add the correct ID attribute
$(".off_screen_right").attr("class","content on_screen"); // make off_screen_right the new on_screen
$(".container").append('<div class="content off_screen_right" id="'+current_id+1+'"></div>'); // add the new off_screen_left element and add the correct ID attribute
$(".off_screen_right").load("load-content.php?page_id="+current_id+1); // populate the new off_screen_left element
});
But that's just one option. You can use a slider out of the box but I prefer to custom code things so that I know exactly what I'm doing.
Lets say a member is displaying 10 images by default but a link will display the rest of the users images by having them slide down when a user clicks a link.
So my question basically is I want to be able to display all the users images buy having them slide down when a user clicks on a link <a>. How would I be able to tackle this problem using JQuery, PHP & MySQL?
check this plugin, it's not what you asked, but it's (IMO) a better solution
http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
BTW : PHP and MySQL are arbitrary in that question since it depends how your images are stored on the server
This will take care of it.
<script>
$(document).ready(function() {
$(".more").toggle(
function() {
$(this).text('less');
$(this).parent().children(".bottom_images").slideDown("fast");
return false;
},
function() {
$(this).text('more');
$(this).parent().children(".bottom_images").slideUp("fast");
return false;
});
});
</script>
<style>
.bottom_images {
display: none;
}
</style>
<div class="container">
<div class="top_images">
<?php
//num images to originally display
$num_show=10;
//current position
$i=1;
//some code to get user images
//from database etc
foreach($images as $image_url) {
if($i==10) {
echo '</div><div class="bottom_images">';
}
echo '<img src="'.$image_url.'" />';
$i++;
}
?>
</div>
more
</div>
Obviously there is some pseudo code for retrieving the user images as there are a number of ways you could get the images eg. from database (as a blob or text url), scanning the file system, user input etc etc. Also I have made it so you can add multiple containers (multiple users) into the one page.
It depends on various aspects how do you want to do it.
You can use LazyLoading as provided by Yanick Rochon
You can preload all the images and simply show the hidden ones when
clicked.
You can also load additional images using AJAX
You can load the visible images first and after all they're loaded - preload invisible images so to show them instantly after clicking a link
Describe your problem a little bit deeper.
I wish to do something iframe-like with my div i've got going here.
Basically, i've gotten as far as making links change the content of the div like so:
Open file
This works pretty well, sadly though, if i make another link inside that to change the content back to the first file, the server gets stuck in an infinite loop and crashes.
I really am just trying to find some way to dynamically change content, and to fetch that content from a file using php. If my way of approaching this is completely ludicrious, i do appreciate suggestions.
I think the best and easiest way is to use jQuery:
<script type="text/javascript">
$('#addContent').click(function(){
$("#maincontent").load("file.php");
return false;
});
</script>
Open File
<div id="maincontent"></div>
This script will load content of file.php into selected div using ajax call.
This looks like a good place for jQuery's load() function. Just give the div an id, add a click event to the link and have the event load the contents of your php script into the div. Maybe append a class (e.g., 'updated') to the div when you load the new data. That way your click event can check is('.uploaded') on the div and switch it back when the link is clicked again.
Put divs inside #maincontent that hold the different content that you want. Give the divs IDs. When the link is clicked hide/show the appropriate content
This is a similar thread: Tabbing in PHP?
Firstly, I'd suggest not building the event handler like that. For one thing you'll have to be really careful you correctly escape the content. I would do it this way:
<div id="content1">
<?php include 'file1.php'; ?>
</div>
<div id="content2">
<?php include 'file2.php'; ?>
</div>
and then manipulate those with Javascript. You could either set the innerHTML or simply hide/show the relevant divs. So:
<script type="text/javascript">
var content = 1;
function swap_content() {
document.getElementById('maincontent').innerHTML = document.getElementById('content' + content).innerHTML
if (content == 1) {
content = 2;
} else {
content = 1;
}
}
</script>
Open File
Alternatively you could just hide/show them as appropriate rather than copying content.
Lastly, while not required this is much more trivial to do in a Javascript library like jQuery.
To me it sounds like you should use AJAX. On the clickevent (which you also shouldn't bind with inline code), you would instead load the content with an XHR request.
To make life easier for you I would recommend looking at a JavaScript Library, where my personal favorite would be jQuery (www.jquery.com). To achieve what you are trying to do you would just do:
$('#id_to_the_a_tag').click(function() {
$("#maincontent").load("file.php");
return: false;
});