My client is asking for a slider plugin for wordpress those will be placed at the header of the page. It will have multiple images fading one after another with next and previous button. But the problem is he does not want exactly responsive slider . He wants some like this link http://go-vacation.com/ . Please look at the slider of the top. Try to resize the browser width and height. The main theme is when someone resize the browser window the image is hiding behind the screen. and no scroll bar is coming. Scroll bar will come only when the screen is resized to less than 960 pixel. Image size of the sliders will be 1600*600 px.So suppose the screen is now at 1000px then you will be able to see only 1000px portion of the image the rest will be hidden from both side of the screen. Please observe the behavior of http://go-vacation.com/
I am not actually the logic behind this so that I can start with CSS and js. What will be main theme to start for this. Do you have anything in your collection? If it is normal jquery slider then also no problem . I will convert it to wordpress plugin. Or any help with simple example of the main logic is appreciable.
The best WP slider I know (which is also responsive) is FlexSlider. But you can use any slider you want. Just set your slider container min-width and width: 100% (if it's not set by slider itself).
Related
We're designing an application that processes images and highlights certain parts by parsing co-ordinates. However, images being larger in size can't be displayed in single go. Also image can not be scrolled vertically as I've applied no formatting as of now, only horizontal scroll works.
Now the requirement is to display the full image with scrolls enabled. Also, the image size vertically and horizontally should be resized when the boxes on the top and side are expanded and collapsed.
E.g. This is how the page initially loads with the sidebar:
Now, we can resize it when the need for sidebar ends as highlighted so as to get the entire view to image after collapsing the bar in the image after this:
Of course the top and side bar can be floating over the image or when the bars are expanded the image needs to be resized so as to not conceal any of its details.
We're developing this application in dot net MVC and image is displayed on the view. I'm not able to understand what would be the simplest approach to achieve this without using complex jQuery functions? And if there's no alternative to using jQuery then what other technologies in accordance to jQuery will be needed to achieve this? Is it also possible to achieve with simply HTML and CSS?
I'm trying to create a responsive website in Dreamweaver with a header and menu which initially scroll and then stick to the top of the page.
The header and menu would need to scroll over the top of a fixed hero image.
This hero image can't be defined as a background as it will be powered by a flexslider script to change the image after a set time.
I would also like the sticky header to possibly shrink down in height when it reaches the top of the page, to reduce the amount of screen space it takes up.
I've found a number of sticky menu examples on-line and some seem to have the annoying trait where the content directly below the menu disappears behind it at the point at which the menu sticks to the top of the screen. I would like to avoid this.
Please find a Mock-up of what I'm looking for here
Obviously, all of the above won't be acceptable on a mobile device.
So for mobiles, the header would need to scroll out of the way, leaving just a hamburger style menu fixed at the top of the screen.
I have found a number of examples on-line with elements of what I require, but nothing yet that combines everything.
I've tried cutting and pasting code from different sources, but haven't yet achieved the desired effect.
I don't know if what I'm asking for is workable, but I would appreciate if anyone could point me to examples of how to achieve this (or improve upon what I'm looking for).
Thanks
Neil White
Use this JS
http://stickyjs.com/
it adds the class is-sticky to the element which you wanted to stick to top. So you can add height in css for is-sticky class. Which in terms will reduce or increase the height of element when it reaches to top as per your requirement.
I have been trying to implement a Image Gallery feature to my project using Blueimp (https://github.com/blueimp/Gallery/blob/master/README.md) but I am facing few problems with the thumbnails being showed in the gallery.
THE GALLERY
My problem:
If I add many images to the gallery, the thumbnails shown increases height of preview div vertically which I dont want.
My expectation: I want to give user the ability to scroll through thumbnails with the preview bar having a fixed height
Trials: I tried giving overflow:auto and max-height to the tag and got this result
WITH OVERFLOW AND MAX-HEIGHT
Problem with this: An ugly scrollbar appears at right of the preview div and moreover scroll happens vertically in this case not horizontally. Also, since I am making a responsive design, I wanted this to be compatible with mobiles too.
Since I will also be emabling Lazy Loading to my Gallery, it would be better if thumbnails and images shown beyond the viewport width load dynamically.
Is there any way I can implement this feature? Thanks in advance.
EDIT: I was able to partly implement the feature by using Jquery UI's draggable, setting width as auto, setting all lists to float left, using overflow as hidden and setting a max-height. Now, I am able to drag the preview div in left to view more thumbnails but the problem is if I use the next button, the thumbnail looses focus after last thumbnail visible in viewport (I have to drag to left to see the current thumbnail)
And I have still not figured about implementing Lazy Loading feature
Okay this is a rather complicated setup/question so I will try to explain it as clear as possible. Right now stellar parallax is working great on my site with no issues whatsoever. this was accomplished by setting the responsive property in stellar.js to true which makes it so that the background image follows the div when you resize the window. Because the issue before was that resizing the window was bad because stellar vertically aligns the background images in a certain way so if you resized the window the div in question might end up in an area where the background is repeating or in an empty spot(if you had no repeat on), it just wouldnt be aligned with the background image anymore. Responsiveness=true fixed this.
However here is the new issue. I have a section on my website where 3 divs are set to display: none by default. 3 buttons, respectively, toggle their display. Toggling their display makes their parent div much longer therefore pushing the rest of the content of the page further down. This pushes the stellar divs out of position with their background images again and i can see areas where the image repeats or are blank(if you have no repeat). However if you resize the window after you toggled the three hidden divs, the stellar divs will automatically fix itself and realign the images as a result of it picking up the responsiveness. I was wondering if there was anyway perhaps I could make toggling the hidden divs trigger this realignment without the user having to resize the window(he/she wouldnt know he/she had to anyway)?
Perhaps a way to refresh a specific part of the page(the stellar divs)? Or perhaps a function to resize the window by like a pixel or even 0 pixels just to trigger the responsiveness?
Thanks in advance, I hope everything makes sense.
The client wants to have a simple slideshow with a little twist: he wants the menu to be on top of the image being changed.
what would be the way to achieve this using css and javascript?
Don't use a background image, just put the menu in a division and position it absolutely on the top of the image somewhere. You can't resize background images and if the images are bigger than the client's visible area they will be cut off.
As you normally do. The order of the image and menu is important. If the menu is after the image then you are ok. If you can't/won't change the order then you'll have to use the css z-index property.