I know very little to nothing of jQuery or JavaScript. So after fiddling - and failing - for hours here's my question:
In the header of my website (http://dev.shespeakswithpassionmembership.com/index.php), I have got an svg image that shrinks on scroll. Great, it works!
But, what happens is: the menu doesn't jump next to the shrinking image. I want that because it saves a lot of space and it looks nicer.
This is what I've done so far:
The image is centered on load. For this I have added this CSS to the navbar-header:
.navbar-header {
width: 100%;
}
The image has got this CSS:
header.large img {
height: auto;
margin: 10px auto;
max-width: 100%;
width: 900px;
display: block;
}
When you scroll the image shrinks. As you can see the header has a class of .large and the image is shrunk by removing that class and replacing it with .small:
header.small img {
height: 49px;
max-height: auto;
width: 154px;
max-width: 100%;
margin: 10px 5px 0 10px;
}
This is done by this jQuery script:
function slabTextHeadlines(){jQuery("h1.slabbed").slabText({viewportBreakpoint:380,minCharsPerLine:10})}var App=function(){function e(){jQuery.browser.msie&&jQuery.browser.version.substr(0,1)<9&&jQuery("input[placeholder], textarea[placeholder]").each(function(){var e=jQuery(this);jQuery(e).val(e.attr("placeholder")),jQuery(e).focus(function(){e.val()==e.attr("placeholder")&&e.val("")}),jQuery(e).blur(function(){(""==e.val()||e.val()==e.attr("placeholder"))&&e.val(e.attr("placeholder"))})})}function r(){jQuery(".carousel").carousel({interval:15e3,pause:"hover"}),jQuery(".tooltips").tooltip(),jQuery(".popovers").popover()}function o(){jQuery(".search").click(function(){jQuery(".search-btn").hasClass("icon-search")?(jQuery(".search-open").fadeIn(500),jQuery(".search-btn").removeClass("icon-search"),jQuery(".search-btn").addClass("icon-remove")):(jQuery(".search-open").fadeOut(500),jQuery(".search-btn").addClass("icon-search"),jQuery(".search-btn").removeClass("icon-remove"))})}return{init:function(){r(),e(),o()}}}();jQuery(document).on("scroll",function(){jQuery(document).scrollTop()>100?jQuery("header").removeClass("large").addClass("small"):jQuery("header").removeClass("small").addClass("large")}),jQuery(window).load(function(){setTimeout(slabTextHeadlines,.01)}),jQuery(document).ready(function(){jQuery("#totop").hide(),jQuery(window).scroll(function(){jQuery(this).scrollTop()>100?jQuery("#totop").fadeIn():jQuery("#totop").fadeOut()}),jQuery("#totop").click(function(){return jQuery("html, body").animate({scrollTop:0},660,"easeInOutExpo"),!1})});
$(function() {
$('[data-rspnsv]').rspnsv({delay: 200, duration: 3000});
});
For the menu to jump to the right of the svg image, I need to remove the width: 100%; and to assign a width: auto; to it. I would like to do that by adding a line of code to the script above so that it not only replaces header.large with header.small, but does the same trick with the navbar-header.
Is there anyone who can append the script to do this? To me it would seem rather simple for someone who knows about jQuery (which I don't).
Thanx in advance,
Thom
This is a CSS question. It doesn't require any jQuery changes. Add this CSS
header.small .navbar-header{
width: auto;
}
If you want the menu to remain at the bottom, this is one way of doing that.
header.small #js-meganavi{
margin-top: 46px;
}
Related
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
I am relatively new to front-end dev so a bit lost as to how i can go about this. I created a container that contains a slider and some images. My supervisor has a huge screen so obviously there will be empty space at the bottom of the screen. So he doesn't want that. Instead he wants the container to be centered horizontally and vertically based on the size of the user's screen.
How can I do this properly with as minimal code as possible? I believe there is jQuery plugin but wanted to see if there is a better way or if doing this makes sense at all or not?
Due to the flow-based nature of CSS, without Javascript this can only be done if the vertical size of the centered element is fixed, by applying a position:absolute' andtop:50%` within a fixed container, and then use negative margin to offset the container. Click here for JSFiddle Sample.
Alternatively the same effect can be reached by using display:table-cell, but that's kind of messy and loses you a lot of flexibility. Sample already supplied in the other answer here so I'll save myself the effort :)
You can do it easily using a vertical-align property.
Since vertical-align works the desired way way only in a table cell, this trick with display property can give you the desired effect.
#yourDiv {
// give it a size
width: 100px;
height: 100px;
margin: 0 auto;
}
html, body {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
See a fiddle with demo.
Try this:
HTML:
<div class="center"></div>
CSS:
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: red;
}
Demo: http://jsfiddle.net/WDth4/
Exactly Center an Image/Div Horizontally and Vertically:
http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/
http://www.michaelhoffmandesign.com
So I and pretty new to coding and have been coding this website from the ground up for professional use. The problem is, when users click the Resume section, the whole navbar moves over to the left. I have tried to correct this by adding a left:x px. But it doesn't seem to work. Any help?
The scrollbar causes the slight difference. You can enable scrollbar on all the pages with:
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
This makes the scrollbar always visible and only active when needed.
Or another solution would be:
html {height: 101%;}
use margin: 0 auto for nav to align center
Try this:
nav {
position: relative;
width: 800px;
height: 17px;
margin: 0 auto;
text-decoration: none;
}
header nav ul {
width: 800px;
margin: 0 auto;
}
In the html for resume.html, check this line :
< nav style="right:10px;">
Remove that style attribute and give it a try.
My website I'm creating for a company looks great but I just don't know the right CSS to put in the to make the "WELCOME" title show underneath. I understand that I should put a height, but then if I do that it will show a height for all pages as it is wrapped in an if statement. If on the home page show this widget, if not don't show it. So if I have a set height even if the widget isn't visible on the about page the height will still be in the way. So I thought height:auto; would do it but it's not doing that.
#home-services {
width: 100%;
height: auto;
clear: both;
margin-bottom: 30px;
margin: 0px !important;
}
#home-services section {
float: left;
width: 240px;
height: auto;
margin-right: 10px;
background-color: #aaa685 !important;
}
This is what it looks like across all browsers.
What else do I have to put into my CSS to have the WELCOME title move down just on this page? Any help is appreciated!
Hey now add this css
Already add in your css style sheet this css
#home-services img{
margin: 0 0 -25px !important;
padding: 0 !important;
}
Now put this css Used this one
#home-services .textwidget img{
margin:0 !important;
}
Do this
#home-services .textwidget img{ margin-bottom:25px !important;}
Try inserting padding-top:30px in the h1 css.
It will clear the problem. If this gets you into trouble with the layout and you need to eliminate the padding, have a javascript function called on load that checks if that h1 is displayed or not and modify the padding accordingly. This is in no way elegant, but it will solve your problem.
you can also use jquery in if statement to change CSS like
$(".yourclass").css("CSSproperty", "value");
I have padding to the right of my archives and search page and I believe it has to do with my body element, however I'm not quite sure what is different on these pages are from the other pages on the site of which are all fine for style wise as they all use the same format. It's a wordpress website. As I said, it's only happening to this page and the search page and all others are fine, so I'm confused as to what it's doing.
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; }
body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;}
header { width: 960px; height: auto; margin: 0 auto; display: block;}
#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}
aside { width: 260px; height: auto; float: left; position: relative;}
#main { width: 650px; height: auto; float: right; position: relative;}
#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }
If you decrease the size of your window you'll notice that a scroll bar on the bottom of the page shows up and then the padding on the right starts to take shape. If you make your window larger that padding space is then gone and the scroll bar on the bottom disappears. Have I restricted my body tag in any way to have this happen?
I've looked through this one but I already have a min-width defined.
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
In your style.css file at Line 108, remove the width attribute from the header tag to fix your horizontal scrollbar issue.
Fixed CSS:
header { height: auto; margin: 0 auto; display: block;}
For review, 3D View in Firefox browser shows the header as the gray bar with is the root of your problem. The other styles that create the text are not affected.
Tip: Right mouse-click the above image and view in new tab to see in original size.
Ah, if I'm understanding your problem correctly, it appears that the tag header, specifically its style width: 960px, is what is causing this peculiar occurrence. The containing div around the header, #main, only has width: 650px. As a result, the excess width of the header causes it to extend beyond the edge of the div.
The reason why it seems to be appearing as padding only at smaller screen widths is because the containing div around all that, #container, is centered by its margins - so the effects of the over-wide header won't become apparent until the browser is thin enough such that its right edge begins to overlap the right side of the header.
Rather than fixing this by just dropping the width: 960px from the styles of the header (which may mess up the site where this width for header tags is actually needed), I would suggest adding an overriding class to all offending tags, perhaps on the lines of .archive-header { width: auto; }. But I guess the solution is up to you, since you probably know the site better than I do.
I hope this helps! (I really do, otherwise you'd have read all this for nothing! Sorry if you did...) For the future, try downloading Firebug for Mozilla Firefox, which has a handy element inspector which will let you play around with the styles of elements to see what works. It should help you spot these kinds of issues on your own, so you can fix them quicker.