HTML/Javascript Tiling Images? [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Wondering if I have a dynamic list of image data, whether there's any libraries or techniques out there to tile the list of data. Keep in mind I don't know a priori how long the list is, but let's say that it is at least one (tile) row's worth of elements.
e.g. something like this

I would make a grid, or pre-built table that has one row, and how ever many images acrross you want. Then when you get your images, get a count, and dynamically add rows, using the index of the image placing it into the index of the cell/td. Would be a good route, until you maybe find a library for it if there is one. Though, sometimes, if it isn't a huge "reinventing the wheel" type of snippet, there are some benefits to writing your own code for it. :) Hopefully that helps.
By the way, jQuery Masonary, and Responsive Photo Grid are some libraries you could look into to. Here is a related post for you:Mosaic Grid gallery with dynamic sized images

Related

CSS Styles Not Properly Applied to Dynamically Added List Elements [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I've been trying to find a solution to this issue for a few hours.
I have a list that I'm dynamically adding items to using JavaScript & the Dojo library. I've done it using both vanilla JS and Dojo, so I've ruled that part out.
The issue: When the new list items are appended to the current list, they lack some of the CSS styles the other elements have. Not all of them, but things like 'white-space: nowrap' and margins are off.
Code can be view here: http://jsbin.com/omEJoBAf/2/
Screenshot of it in my application: http://imgur.com/GRueGR4
All your css values are the same accross objects. As far as what I think your problem is, it has to do with the fact that your elements are all 'inline'. There are line-breaks in the code that are getting rendered as spaces, but dynamically added elements are added on the same line so there's no space.
Couple things you could do. Probably the fix I would use is to set the li elements to 'display:block; float:left'. You could also remove the linebreaks in the code for all the li elements that are initially rendered on the page.
EDIT: After seeing your screen cap, I'm positive its because they're inline. Float em, or remove line-breaks will fix it.

I'm creating an animated flahscard app with jQuery. Where do I start? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm not sure if this should be under a different question or not, but I would like to know where to start with this. I have a set of 84 cards front and back, when a user starts, he/she sees the front(question) side of the card, then, he/she clicks the flip button and sees the back(answer) side. On the answer side, there's a button to continue to the next card. My question is, how would I set this up without creating a lot of show/hide/toggle functions, while animating each of them, for each card?
Take a look at jQuery plugins at official website or at Google. You need to find some plugins you want. See, for example:
http://www.jqueryrain.com/2012/12/best-jquery-page-flip-book-effect-with-examples/
http://blog.guilhemmarty.com/flippy/
You will get more help here with some code. But you need to find first the code example.
I think this links above are good places to start, and choose a plugin is probably the best way for you now. Maybe you find exactly what you want in a plugin, maybe you just need to extend it.
I like this 3d card flip jquery plugin: http://www.zachstronaut.com/projects/rotate3di/#demos
If you want to use jQuery as a starting point for the abstraction of this problem, then maybe jQuery widgets are a good pattern: http://jqueryui.com/widget/

Is it possible to fix pixels of a picture in jQuery or CSS? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
Hi I am dealing with a report application that outputs some charts in picture formats like JPEG, PNG etc.
What I want to do is to fix 100px from top and 100px from left so that while the scrollable data is shown in the center, first column(name bar) and the top header(date) stays fixed. It is possible to do it with a HTML table structure but since I am working with ONE .jpeg file it does not work for me. Shortly, I need to divide one picture into pieces with CSS or jQuery.
EXAMPLE
This is what I am trying to do exactly. But I need to do it with a .jpeg file as I mentioned. I have to work with one stable image, means I can't request to divide the pictures into 3 pieces like; Header, First Column, Data.
I don't think that this question deserves all the downvoting.
As I understand it, the question is asking if it is possible to hold constant in a browser a part of an image and scroll the rest.
I think that the answer is no, but you can emulate it using two - sorry, three - copies of the image, using the CSS 'clip' property to extract appropriate parts of the images and other CSS to handle the scrolling. I don't have time to provide a worked example.

Swap out html table for new table [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Is there a way to completely swap out a HTML table for a different one using javascript?
I know I can change the content in an existing table but can I have a pre-made table and just swap it in in place of a current table? and if so, how would I go about doing that?
If you already have the two tables in that screen you can simply make one of them invisible using CSS style="display:none" and use javascript to access them and switch the display attribute between them each time you want to swap.
javascript code to switch would be
document.getElementById("elementID").style.display=''; (to show)
document.getElementById("elementID#2").style.display='none'; (to hide)

Do not load certain images when page loads [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a webpage, a simple index.php. With jquery I managed to set up 5 individual menus. Unfortunately I have to use like 150 thumbnail images in my gallery, and whenever I reload the page, all those pictures need to load in as well and it takes like 5-6 seconds. I tried to set up Lazy Load jquery addon, but it just didn't work for me (it is written for scrolling websites I guess..and mine is not like that).
I was thinking about writing a script, which prevents all those images loadin, but I don't even know how to start. My point is, thumbnail images should be loading only if the user clicks on the gallery link (which is the very same php page though).
Just put the images' url in a separate attribute like:
<img data-realsrc='realsrc'>
and then when you need to load them:
$(img).attr('src', $(img).data('realsrc'));
The above is the general implementation principle. For a real example look at the fiddle: http://jsfiddle.net/3UrUZ/
BTW doing what you did is not a good practice. I suggest you to use CSS Sprites istead of a lot of images. :) And there are a lot of sprites generators to help creating them.

Categories

Resources