I love the functionality of the drop down menu on this site: https://squareup.com/
I see that it's a pretty standard drawer-style drop down, but my question is how they get the image to split like that. After inspecting the code I'm pretty sure they don't use 2 images. Any advice or help on this would be greatly appreciated!
The image does indeed appear twice. If you run this selector you'll find them.
$('.home-page .hero .image, .home-page .banner .image')
The second part of the image starts where the first image is cut off by the dropdown, giving the illusion that the image is split into two.
media="screen"
#media (min-width: 718px)
.hero-image-split .hero .image {
background-position: 50% -73px !important;
}
For those that couldn't find the split, it occurs when you click on "Business Types" or "Products" on the navbar.
Related
This is a pretty absurd question but has been bugging me for a while now. I am designing this website and I am just finishing off on the responsive/mobile view. Currently it looks okay but that's because I delete the images with display : none: when the view port becomes too small for the image to look good. (Can bee seen at drleilamasson.com/css/responsive.css)
The images I want to change are the book (under the book section) and the parrot (under the social section) If I were to not delete them they would just go over the text / embedded post I have and block the content. What I want to happen is that the book image goes above the text centered perfectly. I have fiddled around with the styles of these images but never been able to figure it out.
I hope you guys can figure it out! Thanks :)
You've already set a flexbox parent on the <section id="about">, so we can play with the direction and ordering of the children.
#media (max-width: 1065px) {
#about {
flex-direction: column; /* stack the children */
}
.leila-book-img {
...
display: none; <-- remove
margin: 0 auto;
order: 2; /* put the image container after the text */
}
.about-content {
padding-bottom: 1em;
}
}
I'm using Joomla 3.3.4 FYI.
I have an image on the front page (http://www.ckdev.info/cdp) that's a call to action to complete a form for a free estimate. It's great in desktop or tablet (landscape) as the form appears to the right.
However, when viewed on other devices or orientations, the viewport is too small to have the sidebar showing on the right and it drops to the bottom. So the "right arrow" image doesn't make logical sense.
What I want to do is a bit of an "if-else" solution. If screen width is xx px or greater show "right-arrow.jpg", else "down-arrow.jpg". I will attach a anchor to the form so that clicking/touching down-arrow.jpg when displayed will scroll down to the form.
I'm afraid I'm no coder so, while I have no doubt this can be done, I have no clue how! Thanks.
You can do it with css media-queries.
Try this: (change 900px and 899px to your desired values)
#media(min-width: 900px) {
#img {
width: 100%;
height: 150px;
background: url('http://www.ckdev.info/cdp/images/estimate.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
#media(max-width: 899px) {
#img {
width: 100%;
height: 100px;
background: url('http://www.ckdev.info/cdp/images/estimate.png');/*change image url*/
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
Check it out here: jsFiddle (resize result window width to more than 900px)
I've just made your image different size on different media queries, but instead change your background url to your desired image.
You can make this happen using jQuery without anything extra as long as you don't mind some odities in the width of the window that come from the scrollbar. Ill get back to the scrollbar in a sec. To test the width you can use jQuery(window).width(). This will return the width of the window in pixels. Exactly what you are looking for. An example snippet:
jQuery(document).ready(function(){
if (jQuery(window).width() > 1000){
jQuery(<select img here>).attr('src', '/path/to/new/image.jpg');
}
});
I notice that you dont have a class or id on the image you mentioned. I would suggest adding an id to make it easier to select. For example, <img src="/cdp/images/estimate.png" alt="Get a free interior or exterior painting estimate" id="estimate-with-arrow">. If you make this change you can swap out <select img here> for 'img#estimate-with-arrow' (this will select an the image with id estimate-with-arrow). And voila, image swap.
I will note three things.
First, that this will only work on initial page load. If a user loads the page at full desktop width then shrinks it down, the image will not change when it passes the break point. You need to bind to the resize to get this to work:
jQuery(window).resize(function() {
<code here>
});
Second, I set up this particular code to swap out the image for any screen over 1000 px. This means you will only ever load one image for smaller devices, saving bandwidth. This is preferred, ad mobile plans are more finicky.
And third, the scrollbar. Testing the window width using jQuery will not match the same break point as css. I use modernizr to get around this. This is a bit more advanced though.
What you want is a CSS media query to change the displayed image.
For a smartphone like the iphone in portait it would be something like that:
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait)
{ /* STYLES GO HERE */}
For more details take a look at:
w3schools
cssmediaqueries
Dear Stackoverflow community,
I'm very desperated about following setup:
- I have a Website with a Jquery onepagescroll design.
- If the width of the browsers window is below a certain point (769px) the onepagescroll disapears
- Instead a Gumby based design gets activated
But when happening so
... the third of the three sections overlays over the second one a
... after the first section is a gap
I researchead about four hours on this problem and couldn't solve it.
I hope you can help me.
Yours Sinceryl,
yooui
Code:
index.html (http://pastebin.com/6fMtkBbm)
jquery.onepage-scroll.js (http://pastebin.com/FnQWWe7J)
To fix the spacing and overlap, take a look at your CSS. The three "section" elements each have a height of 100%, you'll have to change that in your responsive styles.
So try adding something like this:
#media only screen and (max-width: 768px) {
.onepage-wrapper .section {
height: auto;
}
}
I'm working on a web app where I have an image, and, for lack of a better word, a "view" of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.
The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.
I've tried a div with a background image, but that always resizes the image to fit the div. Right now I'm trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.
Help? Thanks in advance!
Sounds like you want something that masks the image and only shows a segment.
Assuming a structure like.
<div class="img-mask">
<img>
</div>
You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it's where you want it to be.
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
This should center the image to the mask.
I think there's a CSS property cut out for exactly this task: the clip attribute.
Here's the W3schools tutorial: http://www.w3schools.com/cssref/pr_pos_clip.asp. Click the Try it Yourself button to get a hands-on idea.
With this the CSS property applies only on the image and you do not need an additional masking div.
Go to this beta of my new website (link redacted). If you hover over one of the colored squares, a popup box à la Panic's Coda pops up, except there are two problems:
a) The text inside the popup does not show up. It is programmatically set to :) using the following code:
http://grab.by/syM http://grab.by/syM
$('td.middle', this).text(':)');
td.middle is the class of the middle cell
this is a reference to $('.info').each()
Use may want to use an inspector tool like Firebug for Firefox or the one included one in Safari or Google Chrome.
b) The sides are clipped off:
http://grab.by/syE http://grab.by/syE
I think it is due to this:
http://grab.by/syW http://grab.by/syW
For some reason, the sides have computed widths of 1px, as opposed to
.bubbleInfo .popup td.corner {
position: inherit;
height: 15px;
width: 19px;
}
19px as defined in (link redacted)
You can grab a ZIP archive of all the files here (link redacted).
Thanks so much. I know this is a lot to ask.
The width of the container div for the :) table is clipping the sides of the :) table popup. If you edit the width of the .info class up from 32 to something bigger (I did width:80px) you see the whole popup. Alternately, you can change the width (or min-width) of .popup to about 50px, which fixes them without distorting the size of the colored boxes.
As for the :) being missing, I was able to make it appear by setting text-indent:0 in the .middle class. This had no ill effects on FireFox and fixed it in Chrome.