Edit:
tl;dr What I have is a .png file of a horizontal bar and a .png file of a square button. I want to be able to add both images to a webpage and be able to slide the button along the rectangle. I know that it is possible to make range sliders in better ways but using the .png files is a hard requirement.
I have been tasked with taking an image of a range slider, adding it to a webpage, and make the slider interactive/draggable. I know that jQuery has its own sliders (https://jqueryui.com/slider/#multiple-vertical) but this does not seem to apply if you want to use an image of the range slider instead.
Example Image:
(source: dcrazed.com)
How can this be implemented? All the tutorials I see make the slider out of HTML/CSS/JS elements while I have separate images of the slider and draggable button.
FYI, the reason we're using an image is that it looks better than the standard sliders jQuery provides.
It may help if you search for "Form Range Input" or "RangeSlider JS" instead of slider to find a tutorial.
However I don't see any reason why this can't be accomplished more easily and more cleanly strictly through JS and CSS.
If you're having trouble visualising, try breaking your design into parts like so and save yourself the hassle of trying to make an image based design responsive. (Like we all have struggled with previously)
The slider knob itself is a rounded square with three squares inside it.
The slider bar is a rounded rectangle with another three squares placed inside it.
The information box is a div with text and a CSS triangle affixed to it.
The ticks themselves are trickier and will need to be added and removed dynamically with JS depending on their resolution, but their visual details only really need basic styling
If you still feel the need to use images and break the responsiveness of your website then have a look through some Codepens and see what others have done with similar requirements.
Related
If possible, I am trying to create something like the below using just HTML, CSS, and Javascript. I know that the carousel below was built in React but I am not using that nor am I familiar with it. This carousel stretches across the whole screen but it looks like the picture(s) only takes up 65-75% of the width (highlighted in blue) and then the rest is a black box that never changes even when the pictures do. There are words that also overlap the black box and picture. The picture also has some gradient over it on the left side so that the black box nicely fades into the picture.
I am currently using a slideshow/carousel script from W3Schools (https://www.w3schools.com/howto/howto_js_slideshow.asp). I do not have bootstrap with this project either though I may be able to add it if needed. I tried dividing my container into columns so that one side could be 40% black and the other 60% could be the slideshow but that didn't work.
Sorry, I am still pretty new to all of this! Does anyone have suggestions on how to add a carousel kind of like this one without React (and preferably bootstrap)?
I almost have no experience with JAVASCRIPT, so I've searched a lot for a carousel with right & left arrows & lightbox (fancybox). & finally I found it ... but when I click left or right arrow , the all images row slide left or right. I need it to slide normally one image by one. How can I modify that, please ?
Here is an image describe how the carousel look
I already done with copying the carousel to my website, but the only issue is that the all images row slide left & right ... so when the user click left, the current four images got replaced with the next four images.
it's hard to write all needed codes here, I think the others Javascript files make effect on the final result. So, I attached all the needed files.Website's Files
First, I recommend you practice implementing the carousel following this instruction (be sure that you incorporate Bootstrap 4 accordingly).
https://v4-alpha.getbootstrap.com/components/carousel/#with-controls
My experience with carousel is that you would have to nest <div> deep in each image to control their placement and sliding. I had to create container per image for my carousel, so that was at least three levels deep. If you only use images alone per slide, you may be able to just use div containers alone.
Now, if you are using LightBox framework as well, then there are likely to be conflicting javascript functions. My suggestion is that if you really want the carousel, to just use images alone, and then style it accordingly by CSS scripts and not use the Lightbox. Otherwise, it is going deep in javascript and make custom adjustments.
https://jsfiddle.net/rkrameshkumar71/qs6z1o4u/
se angle brackets to force linking: Have you seen https://jsfiddle.net/rkrameshkumar71/qs6z1o4u/
enter code here
I need to build a small image collage. Like this:
I came pretty close with a flexbox and overflow:hidden; but it has too many draw backs. Like some posts get cut off.
I also came close with masonry.js but that wasn't ideal either. There was some weird gaps and image order gets scrambled.
I'm doing it in a Wordpress template so HTMl,PHP,CSS,JS is all good. GUI is good too, whatever.
Ideally the first image would be the newest post, Second is second newest and so on up to six.
The size labels I put on the image are kinda flexible, as long as it scales for different size screens.
If plugins are needed to resize images, create different sizes, etc. I'll try it.
The images are a custom WP field (main_image) from a post content type.
Read some of masonry in this link
I am looking to create an image that is responsive but also expandable. I need to do this all in HTML/CSS and utlize either Javascript or JQuery to make it expandable. I'm able to do either an expandable unit, or a responsive image - but having a hard time combining the two things. Could use some examples or guidance.
So the example scenario would be, on intial page load there is a 924x70 across the page (that is responsive). If you click that unit it expands to 924x250 (this unit also needs to be responsive) - is this even possible?
Thanks in advance!
You could use responsive design through media queries to control the initial image size. Then use jquery to adjust the size on click.
Here is a basic example that uses the mouse hover to change the image size. Adjusting the window size will trigger the media queries, but you will need to do this before mouse hover. It should be a straight forward task to adjust this base example to your needs.
basic html
<img src="theImage" />
media query
#media screen and (max-width:300px){
img{width:200px;}
}
jquery
see demo
hope this helps...
Okay, so I'm working on a project using JavaScript and the basic UI we want to be a very large background image, and when you select the navigation menu items it propels you to a section on that large image.
I've tried finding documentation on Viewports and trying to figure out how Map applications function but have had very very minimal success.
It would basically be a Google map without the user being able to slide it. How in the world would I begin to approach this?
You can set the background-image property in CSS and use javascript to change the background-position.