Make a web looks like a book [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
Hello friends from SO:
I come with a very simple question today: we're trying to make a webpage, or, to be even more clear, an html document, look like a book!
Ok, what do you mean?
I want the elements to go down, until it reaches the maximum height of the screen, let's say, 800px, and then jump to the right.
So let's say an example:
We have a div with a total height of 300px, then, down there comes the second div, with another 300px, and then the third one, but hey! the visible area of the screen, has only 900x of height, so the 3rd div should actually go to the right, instead of making the scroll bar appear.
So anyone has an idea how this can be done using CSS3 and HTML5? I'd rather avoid Js, but if there's no other option, it will be more than welcome.
Thanks in advance and happy new year!
Chris;
For anyone coming here with the same problem, I found several solutions by now:
http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
How to make horizontal scroll on page
http://hotdot.pro/en/
http://www.bartleboglehegarty.com/
Kind regards;
Chris;

Text flowing between columns has long been a limitation / pain the in the backside for web developers.
CSS3 allows some solutions - which have variable browser support.
This is an old article - but have a read for an idea of one approach: http://alistapart.com/article/css3multicolumn
And a more recent update on the CSS3 options:
http://www.webdesignerdepot.com/2013/03/how-to-use-css3-columns/
Some javascript will likely be needed to handle the movement to the right / transitions beyond the visible screen though.

Related

Responsive design breaks after shrinking the browser [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
i'm trying to build a bootstrap design with nothing special but a few columns and some information. First of all, i'd like to know if my code is alright, because I can see that items are not going like column below column as it should be after seeing the page from the small devices. I'm actually feeling now pretty sad about this, because i'm so exhausted that I cannot fix it anymore. Trying, trying and trying, but no results. Maybe you can have a look at my code? (I'd like to add a snippet, but for proper results there is a full source which I added here
Another question, I need to setup the min-size where bootstrap starts wirking from 320px. Where could I do this?
Fiddle HERE!
I took a look at your code and it seems that your problem is mostly just a general misunderstanding of how bootstrap responsiveness works. I would suggest reading up on a bit more to get an idea of how it is used in practice. When you set all your columns to be the same size then you take away what makes bootstraps responsiveness useful. Try making it so as the screen gets smaller, the components get more columns such as
<div class="col-lg-6 col-md-9 col-sm-12">...</div>
This will take a good amount of experimentation for it to look perfect! :)

Height on page coming from an unknown source [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I usually build my wordpress sites by using a theme and creating a child theme. Generally I have done this with Wordpress 2013, but this time decided to take a crack at it with 2014. I have run into a few issues but finally landed on one I have not been able to resolve.
http://demo.diocesan.com/robert/
On this page, it tells me the page has a height of 2000+ px. When I try to find where this height is computed, I find nothing. I have set the height on many different elements to 1000px (even the HTML tag itself) and I still have this mysterious height value.
I suspect this has something to do with the 2014 masonry script (Admittedly I am not great with javascript) and any direction on this would be helpful. So my question - Does anyone upon glancing at this know where the height is coming from and what steps I can take to remove it?
The problem is the CSS on #secondary - it has min-height: 100vh applied, which will make that one element at least one full viewport tall.
It's then hidden because the following element (#primary) which contains the content is given a float: left which makes it move up, so that it appears that the gap is beneath #primary, even though it's not.
Removing the min-height on #secondary, or setting it to a sensible value, will fix your problem.

Contact box is inoperable while in "mobile" size resolution. HTML/CSS [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
There is no custom css set for smaller resolutions. I am having a problem where if I load the webpage at a low enough resolution, click the contact box, I cannot enter any fields till I stretch the browser to a larger resolution. At this point I can edit the contact box and also go back to the mobile resolution and have it still be operable.
The only way to truly explain this would be for you guys to go to the temporary site I setup here. I have scanned the HTML code to see if I am missing a closed div or something, but this scenario is very odd to me, especially since it works at a full resolution.
Please let me know what I am missing, I have exercised all of the possibilities.
It seems to be a problem with the z-index of either the pop-up or the background/overlay that comes up with it. I pulled up the dev tools and set a high z-index on the pop-up and a low index on the overlay and that fixed it. However, the elements are reset each time you open the pop-up. That makes me think that the elements are generated each time rather than shown/hidden. Whatever the situation is, you'll need to add an appropriate z-index to either the css or the element's themselves (inline - not recommended) and possibly with an !important depending on what all is going on in the code.

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.

Categories

Resources