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..
Related
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.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am looking to be able to customize my userultra plugin on my wordpress site so that i can change the color of my sign in and sign up button text. As you can see from the picture below my form isn't very exciting and you cannot really see the text in the button. http://prntscr.com/67bkbu
Basically what i am after is for someone to explain to me how i can edit and customize the buttons on my login and sign-up forms whilst using the wordpress plugin Userultra.
Thanks
It is hard to tell how to do it when you only provide an image, but I'll try.
If you use a third party theme and not a child theme, install a plugin like Simple Custom CSS. If you have Jetpack installed, you can activate the Custom CSS module too. This will enable you to add CSS (= style code) to your site's <head>.
On your site, hover over an element that you wish to change, f.ex. the button, click on the right mouse button and select "inspect element" in the menu. This will open the Page Inspector.
The HTML for the button can look different, but it is likely in <input> field with 'type="submit". Possibly it has a class too, or an id. You can add style to the field type, the id or the class.
f.ex. the submit button here at Stackoverflow looks like this:
<input tabindex="0" type="submit" value="Add Comment">
This is the HTML. In the inspector you likely see it to the left. There is no class, or id, so the style is set by the field type.
To the right in the inspector you can see the styles. The following is the CSS by which styles get added to the input field with type submit (and to other buttons).
input[type=submit], input[type=button], .button, a.button:link, a.button:visited, .btn {
border: 2px solid #f00;
background: #222;
color: #fff;
background-color: #009afd;
border: 1px solid #1777b7;
box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 1px 1px rgba(100,100,100,0.3);
padding: 8px 10px 7px 10px;
border-radius: 3px;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
}
If you would want to make change to this style, you can copy it to the plugins CSS field (text area) and delete everything you do not wish to change.
f.ex. to change the background colour of the type 'submit' to black, the following could be added:
input[type=submit] {
background: #000;
}
I hope that helps you on your way. Else, please post a link to the page, and describe in more detail what you would like to change. That is easier to help.
You need to install any visual composer plugin into your site in order to customize color and other visual appearance. Now talking about button fonts then internet is stuffed with so many plugins that enable you to do so. For instance you can see ilikenull.com. Also you can visit some other sites like noorsplugin, graphpaperpress, graphpaperpress etc. for additional options.
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.
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.
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]-->