well i am displaying a dynamic gallery using PHP... what i want is to instead of showing a lot of thumbnails on one page i rather do paging.. you know the number pages and next and all..
well its an old thing but i don't know how to do this..
HOW TO DO IT ?
but hold your horses HERES THE TWIST
i am showing thumbnails in DIVS which i set in line so lets say if someone open the page in 1024x768 i get 3 thumbnails in a row and and there are 6 rows so they make 18 thumnails on the whole..
but if someone open the page with their resolution lets say 1600 x 1200 i get 5 thumnails in a row so 18 thumbnails would make 3 rows.. lets say i want to keep the rows 6 and pop up the thumbnails to 30... HOW TO RIDE A CODE TO DO THAT
p.s. best of luck with my crazy thangs....
The basic technique is this: You know, or else calculate, how many images you're displaying per page. So when you do your query, that's your LIMIT. Also, you're going to need an offset - how many results you need to skip over. If you were showing 8 results per page and you wanted to show the 3rd page, your offset would be (3 - 1) * 8, or 16.
Now, your interesting challenge sounds like your display: You're showing different amounts of thumbnails based on the display. So you will need to calculate how big of a display you want, probably with javascript, and then make an ajax request to query for the amount of results you want and the offset, based on the page you're showing.
Granted that somehow you manage to get a hold on the user's resolution and that you will be able to compute the total number of thumbnails in a DIV, then it's no magic to tell PHP to go with 30 thumbnails instead.
define('ROW_TOTAL', 6);
define('MIN_THUMBS', 3);
define('THUMB_WIDTH', 320);
// Get the clients resolution (i.e. via ECMA and a cookie)
$thumbs = isset($_COOKIE['res_width']) ?
(int) (intval($_COOKIE['res_width'], 10) / THUMB_WIDTH) : MIN_THUMBS;
// Get the page via the client's request
$page = isset($_GET['page']) ?
intval($_GET['page'], 10) : 0;
$query = sprintf(
'SELECT thumb_url' .
' FROM images' .
' WHERE set_id = %u'.
' LIMIT %u OFFSET %u',
$set_id,
$thumbs,
$thumbs * $page
);
// Feth the records and process them in a loop
// I'll leave that up to you
Good luck,
aefxx
Pagination can be handled in PHP. But you can't do all of what you mentioned in pure PHP. Some AJAX/Javascript will be involved, specifically in auto-detection of browser resolution. You do have to consider clients with browsers that have portrait and landscape dimensions, including small screens (mobile phones 240x240 or 320x320).
you can find screen resolution by java script
document.write(screen.width+'x'+screen.height);
this line will print the screen resolution. so can go for further step as-usual by if condition
if($screen = 1024x768) { execute query
} else { execute query }
I hope This will help you..
Related
working on a simple work day calendar for my bootcamp. 95% there - all of the logic works well, but i am having an issue getting the save button to properly float all the way to the right and flush out the DIV with no errant space between the button and the right edge of the block.
here's the github repository for this project:
https://github.com/infiniteoo/homework_week_05_third_party_apis
here's a live example:
https://infiniteoo.github.io/homework_week_05_third_party_apis/
here's the relevant code pertaining to this issue for quicker review:
timeDiv.text(finalHour + amPM);
timeDiv.addClass('time-div');
// 2nd column: events (big/wide)
let descriptionDiv = $("<div>");
let textAreaForDiv = $("<textarea>");
textAreaForDiv.attr('id', 'textarea' + hour);
descriptionDiv.append(textAreaForDiv);
descriptionDiv.addClass("description");
descriptionDiv.css("width", "80%");
// creates floppy disk icon for save button
let saveIcon = $('<i>');
saveIcon.addClass("fa fa-save");
// 3rd column: save button
let saveDiv = $("<div>");
saveDiv.addClass("saveBtn ");
saveDiv.attr('id', hour);
// add icon to save button
saveDiv.append(saveIcon);
// append all three individual blocks to the bigger div
timeBlock.append(timeDiv, descriptionDiv, saveDiv);
timeBlock.addClass("time-block row");
if (currentHour > hour) {
// if the hour has passed, make the background grey
timeBlock.addClass("past");
} else if (currentHour < hour) {
// if the hour happens in the future, make the background green
timeBlock.addClass("future");
textAreaForDiv.attr("placeholder", "Enter a task to complete this hour...");
} else {
// make the background red
timeBlock.addClass("present");
textAreaForDiv.attr("placeholder", "Enter a task to complete this hour...");
}
// add completed time block to the main container
$("#main-contain").append(timeBlock);
now, if i wanted to 'cheat' and put some padding-left on the save button, that fixes it, but the website breaks when you view it at a smaller width, and these projects need to be responsive.
i'm sure there's something small i'm missing, and quite honestly if you could rather give me a HINT versus the answer, i would prefer it. if you do that, i promise i will return to the thread and post the working answer and praise you with glory.
can anyone please point me in the right direction?
thanks so much for your help!
You are using flex on the row element. This will by default put child elements bang up against each other to the left.
You can get them spaced out along the row in various ways. I think the one you want is space-between this will divide up any spare space evenly and put it between the elements, with the left most element hard against the left and the rightmost one hard against the right (which is where you want the save button to be). So, add this:
.row {
justify-content: space-between
}
I'm making an WP theme, but I have a little problem. I want the length of excerpt (in carachters) to be adaptive to the screen width.
if screen width is bigger then 1000px, 20 characters
between 1000 and 700 it should be 5
between 700 and 640px, 20 chars
between 640 and 480, 5 chars
below 480px, 20 chars.
Hope that this makes sense. :)
I tried creating something in my functions.php. I used methods as:
function new_excerpt_length($length) {
if ((screen.width > 1024))
{
return 5;
}
else
{
return 15;
}
}
add_filter('excerpt_length', 'new_excerpt_length');
But that didn't work, it outputs the same number. Css isn't a solution, has to be done in JS, in the functions.php file (no jQuery)
Sorry to burst your bubble here, but there is no way for php to know which screen size the information is served to. Detecting of screen size is only done on client/browser side.
The nearest you are going to get here related to Wordpress is with wp_is_mobile() which can detect mobile devices, but then again, wp_is_moble() is more that a joke as a proper function.
Your only solution here would be to look at jquery to truncate the output text according to browser size.
Stack,
Basically, I want a homepage with multiple posts stacked on top of each other like techcrunch or basically any blog. With each post, I'd like to have a sidebar box that floats down the page next to the post as you scroll so the user can easily share the post via a facebook like button or whatever without having to scroll back up to the top of the post.
When the person gets to the bottom of each post, the sidebar stops floating down the screen, and when the peson keeps scrolling to the next post, the next post's sidebar begins to float down and so on.
A perfect example is the 9gag.com homepage. Notice how the post title, favorite button, and social buttons, float next to each post/picture.
I'm trying to use jquery's scrolltofixed plugin to accomplish this, but I'm getting stuck. I can get the sidebar divs to begin scrolling down the page correctly, but I can't get them to stop scrolling when you get to the bottom of each post so they just begin to overlap on each other.
Typically, you would stop them from scrolling using the "limit" attribute that is built into scrolltofixed like so:
$('.class-of-sidebar-box-div').scrollToFixed({
limit: 3000
});
This would stop the sidebar box from scrolling with the screen once you've scrolled down 3000 pixels.
What I tried to do, was dynamically set the limit to the height of each accompanying post + the top offset of the accompanying post - the height of the sidebar box in order to stop each sidebar box from scrolling when it got to the bottom of the accompanying post.
Example code:
$('.class-of-sidebar-box-div').scrollToFixed({
limit: function(){
var postoffset = $(this).siblings('.accompanying-post-class').offset().top;
var postheight = $(this).siblings('.accompanying-post-class').height();
var sidbardivheight = $(this).height();
var scrolllimit = postoffset + postheight - sidbardivheight ;
return scrolllimit;
}
});
This is failing. The sidebar boxes start floating correctly, but the "limit" is not being set correctly.
Any ideas where I've gone wrong?
UPDATE: Fixed example code as suggested by Brilliand. However, the limit is still not being set. Additionally, I tried a simpler function as follows and even it didn't work.
Simpler example that also failed:
$('.class-of-sidebar-box-div').scrollToFixed({
limit: function(){
var scrolllimit = 1000;
return scrolllimit;
}
});
Thoughts?
Please take a look at this fiddle: http://jsfiddle.net/y3qV5/760/.
It is using the scrolltofixed plugin you mentioned above: https://github.com/bigspotteddog/ScrollToFixed
Unfortunately, the limit option does not take a function at this time. Great idea though and the next version should have that.
EDIT: the latest version of the plugin now supports "limit" as a function as well as a value.
What I have done to get a similar effect to what you have described above is to set the limit to the offset().top of the next section minus the sidebar height plus some padding, just as you described above. Knowing that the limit option will not accept a function will help with the confusion:
$(document).ready(function() {
$('#cart1').scrollToFixed({
marginTop: 10,
limit: $('#p2').offset().top - $('#cart1').height() - 10
});
$('#cart2').scrollToFixed({
marginTop: 10,
limit: $('#p3').offset().top - $('#cart2').height()
});
});
And, here is a way to iterate over the carts to set them next to their respective divs as you mentioned in your comment below:
$(document).ready(function() {
for (i = 1; i <= $('.cart').length; i++) {
$('#cart' + i).scrollToFixed({
marginTop: 10,
limit: $('#p' + (i + 1)).offset().top - $('#cart' + i).height() - 10
});
}
});
.scrollTop() is the wrong function - it will increase as the user scrolls down, preventing the limit from ever actually being reached. Looking at the scrollToTop documentation, I think what you want is $(this).siblings('.accompanying-post-class').offset().top.
The issue I am having is fairly complicated to explain. I have written up a javascript that displays an image slideshow, and it works fairly well, despite using up more resources than I would like
// imgArr[] is populated before
var i = 0;
var pageLoaded = 0;
window.onload = function() {pageLoaded = 1;}
function loaded(i,f) {
if (document.getElementById(i) != null) f();
else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);
}
}
function displaySlideshow() {
document.getElementById(destinationId).innerHTML = '<div id="slideWindow"><img src="'+imgArr[i]+'" />' + '<img src="'+imgArr[i + 1]+'" /></div>';
setTimeout('displaySlideshow()',1000*3);
i++;
if (i >= imgArr.length - 1)
i = 0;
}
loaded(destinationId,displaySlideshow);
So, this script dynamically adds two images to a HTML element, and it is wrapped in a div.
The div is styled with the height and width of the image, with the overflow (the second image) hidden.
The second image is below the first, and the slideshow is meant to go from RIGHT to LEFT.
My inquiry is twofold:
1) Is there a more efficient way of doing this?
2) How would I animate the images? Would I need to put the second image on the right of the first with CSS somehow, and then set a timer to pull the images (via a style) leftward?
I really don't recommend rolling your own animation library. The Facebook Animation Library written by the wonderful Marcel Laverdet is simple to use and comes with a lot of tutorials to get what you want out of your slideshow. (Note: ignore the FBJS stuff, it's exactly the same even if you're using it on your own site.)
If you're not using a framework, I think you'll find a lot of pain ahead of you. If you still don't want to use a framework, at least find one that is liberally licensed, and take a look at the source code. Here's one, for example.
The basic theory is, yes, you set a timer that moves the image on some sort of interval, either fixed or based on some sort of mathematical equation (eg, sin, cos, etc). By setting these intervals close together, and making lots of them, you get an "animation" in javascript. Typically, you'd use some sort of absolute positioning, moving one element off the screen as the other moves on.
I have a swf with loads text into a Sprite that resizes based on the content put into - I'd like though for the ones that are longer than the page to have the browser use its native scroll bars rather than handle it in actionscript (very much like http://www.nike.com/nikeskateboarding/v3/...)
I did have a look at the stuff nike did but just wasn't able to pull it off. Any idea's?
The trick is to use some simple JavaScript to resize the Flash DOM node:
function resizeFlash( h ) {
// "flash-node-id" is the ID of the embedded Flash movie
document.getElementById("flash-node-id").style.height = h + "px";
}
Which you call from within the Flash movie like this:
ExternalInterface.call("resizeFlash", 400);
You don't actually need to have the JavaScript code externally, you can do it all from Flash if you want to:
ExternalInterface.call(
"function( id, h ) { document.getElementById(id).style.height = h + 'px'; }",
ExternalInterface.objectID,
400
);
The anonymous function is just to be able to pass in the ID and height as parameters instead of concatenating them into the JavaScript string.
I think that the JavaScript is fairly cross-platform. If you want to see a live example look at this site: talkoftheweather.com. It may not look as though it does anything, but it automatically resizes the Flash movie size to accommodate all the news items (it does this just after loading the news, which is done so quickly that you don't notice it happening). The resize forces the browser to show a vertical scroll bar.
I've never done it that way around but I think swffit might be able to pull it off.
I halfway looked at swffit but the height (and width sometimes but mainly height) would be dynamic - swffit let's you declare a maxHeight but that number would be constantly changing...maybe I could figure out how to set it dynamically. A great place for me to start though - thanks!
What I've mostly been using if for is to limit how small you can make a "fullbrowser" flash, and for that it works great.
Happy hacking!
(and don't forget to post your findings here, I might need that too soon ;))
SWFSize
See here for more details.
Intuitsolutions.ca