Currently I am dynamically generating 1-(N) images via php GD based on user form input, and then posting into an iframe, that displays the image.
But theres a couple of problems:
Iframes seems to be a drag when styling.
The user dont seem to be able to "rightclick->saveas" the images properly when in iframes.
So are there any better methods for doing this?
Use a fixed size div element with overflow: scroll set on it.
For example:
#container {
width: 600px;
height: 300px;
overflow-y: scroll; //vertical scrolling only
}
It behaves in the same manner as an iframe, but allows you better control of both content via javascript and styling via CSS.
Related
I'm working on a website in which part of the content (an "info" table that is different in every page) needs to be in a different div altogether in the responsive mode vs desktop mode.
I'm looking for a way in which I can repeat this div without having to copy it and paste it twice in every page. A bit like you'd have an php include query but without having a file specifically for it.
Is there a way to assign an ID / name for a part of the content on the same page and then "calling" it again?
EDIT with more info:
Basically every page has a floating div with information (it's a portfolio for an artist made by a friend that I've been asked to make responsive)
In the desktop version that info DIV is simply
#infodiv {
z-index:99;
position:fixed;
bottom:100px;
right:0px;
width:250px;
height:310px;
background-color:#FFF;
box-shadow: 2px 2px 10px #999;
text-align:left;
overflow:scroll;
}
For the responsive version I am including a navbar that will go over the entire page when a button is clicked (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_full)
The only way I've found to do this is to have #infodivdesktop that is hidden when accessing the website via mobile and to have the above navbar in the mobile version. Thus repeating the content of the div twice..
I've recently started a new job at an Audio Visual company and they've asked me to develop an application that allows users (without authentication) to upload images to a display page and have it automatically scroll through.
I chose the only carousel I've ever found helpful but my issue is that the landscape images are not vertically aligned with the portrait images.
My code is set up so that the uploaded image is sent through to a database and then retrieved to display automatically in the carousel so each image has it's own individual div tag.
The page itself won't load without database connection and doesn't work in JSFiddle because of the PHP elements within.
Also here are screenshots of my issue:
Image 1 displaying portrait image at full height
Image 2 displaying landscape image at top of the page
I want image 2 to display in the center of the page and everywhere I look for the correct information I don't seem to find what I'm looking for.
Please help me, I would very much appreciate it!
AlexJamesDean.
You can add position to image div
.autoplay{position: relative;}
#img_div {
width: auto;
height: auto;
postion: absolute;
top: 50%;
transfrom: translateY(-50%);
}
i am making a group type page thing, and i have a div on the side of my webpage, which gets its members from the database, and so when there is like 5 members showing, i would like no scrollbars on the side but if the box fills up say with 15 members, i would like scrollbars to appear in the div box. I was wondering how is that achieved with html, css or php (simplest way possible).
Whatever DIV you are using to contain this content make sure you change the overflow attribute to auto and then it is just a matter of making the height of the DIV tall enough so that it won't show a scroll bar when 5 peoples names are in the box, make it so when about 15 or so names are in the box it will be full therefore the scroll bar will automatically appear...
It should look something like this:
.currentmembers{
width: 100px;
height: 500px;
overflow: auto;
}
Using overflow: scroll; will also leave a horizontal scroll bar which I'm assuming you don't want so overflow: auto; will be the most appropriate. Also the height of your DIV will depend on the font sizes that the names will be in, the smaller the font size the more you will be able to fit in that one box before the scroll attribute comes into play.
I have a php script that returns a list of small images (like thumbprints) that are displayed based on search criteria.
I'd like these images to be displayed on after another until they reach approx 45% across the screen and then if there are more images than will fit in the space, the images continue on to a new line.
I have used CSS to set the following within a div.
.example {
Float: left;
Width: 45%;
}
But the images continue beyond the 45%.
If I used the style overlap:scroll; or overlap:hidden, the images stop at 45% and either you can scroll to see the others or they are hidden.
How can I make the images continue onto a new 'line'.
I've tried word-wrap without success.
Thanks for your help.
the way you describe it it should work just fine.
I made a jsfiddle DEMO
images are by default displayed as inline elements, if the elements are not images try using display:inline on them or display:inline-block.
Try adding display:inline-block; to the element.
I'm looking once again for help from the collective. I created a site which when viewed in IE scrolls choppy but is smooth and fine in all other browsers. I checked on two different laptops to be sure it wasn't just my video card.
I also removed all the images to see if it was an image display issue and that didn't fix the problem. Does anyone have any ideas?
UPDATE* : Based on the feedback I've also tried the page with the images, box-shadows, and google font's removed and I still get the choppy scroll. I've also now just removed the nav and side banner...ugh still no good.
FOUND IT: Ok so after essentially deconstructing my website piece by css piece I found that the cause of the choppy screen was due (mostly) to the use of the border-radius attribute (thanks for pointing me in that direction). my page has two container divs that I applied the following css to:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Once I removed these the page was 90% smoother. I still get some choppy scrolling due to the header image it looks like but it's much better.
**The final solution was to:
1. Added conditional IE specifically to disable the border-radius when viewed through IE browser
2. To remove the last bit of choppy-ness :) I took all the images I was using, created a sprite for them in photoshop and then used yahoo Smush-It to compress that file. The site now loads great.
Thanks for the input all!
My url is http://monopolydealrules.com
Thanks!
**The final solution was to: 1. Added conditional IE specifically to disable the border-radius when viewed through IE browser 2. To remove the last bit of choppy-ness :) I took all the images I was using, created a sprite for them in photoshop and then used yahoo Smush-It to compress that file. The site now loads great.
Thanks All for your insight!
UPDATE* I also ran into a similar issue in safari mobile on my iphone for my mobile version. removing the border-radius attribute from the container element also fixed the speed for my mobile site.
It is very likely your box shadow causing the issue. There isn't a ton of documentation out there, but it is generally advisable not to use CSS box shadows that are that large.
http://nerds.airbnb.com/box-shadows-are-expensive-to-paint
I have a complex layout and IE9 was stutter scrolling for me too. In my case the regular page with the full layout scrolled fine but when adding a ckeditor in the same layout scrolling got very choppy. I guess IE just can't render rounded corners and a complex UI at the same time.
I used this to fix it:
<!--[if lt IE 10]>
<style type="text/css">
* {
-webkit-border-radius: 0px !important;
-khtml-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
</style>
<![endif]-->