I am trying to make the CSS animation for the Menu. Here I want to make the menu as shown in the image. My question is how to write the menu text like in this sample image and make onclick event for each text? The Onclick event might use the CSS #Keyframes (For making some animations).
I am newbie to the web designing field, and it looks very complex for me.
Use CSS transforms
-webkit-transform:rotate(degrees);
transform:rotate(degrees);
Use it on the whole outer wrapper, so you wont have to do it individually on all the links.
Related
I have a text div and several buttons that I would like the text to smoothly fade in and out when changing and/or hiding.
From checking Google and Stack Overflow, most of the answers suggest applying a CSS class of hide, then toggling that class while using a custom function to wait half a second before changing the text so the timing is perfect when the other text fades back in.
But I've read that can have problems with text that has span tags which mine have, and several people have also suggested there may be some plug-ins to simplify the process.
I can't find one, but is there a better method or a plug-in to handle this without replacing all of my code that updates text with custom functions?
I don't mind doing that if it's the only way, it just seems like there's likely a better/more intuitive option?
About your statement:
I have a text div and several buttons that I would like the text to
smoothly fade in and out when changing and/or hiding.
Fade in / And Fade out can be achieved via CSS itself, or with Javascript or if you are using a JQuery library with that also. And text within buttons will not create any issues at all.
In Pure CSS you may require only two properties:
transition and opacity to be used in proper way.
This link can be helpful from CSStricks https://css-tricks.com/almanac/properties/t/transition/
In JQuery there you have fadeIn() and fadeOut() functions which takes care of all the CSS internally and you only have to call these.
You may check this resource from W3Schools
https://www.w3schools.com/jquery/eff_fadein.asp
And Lastly even in pure Javascript the same can be achieved, depending on the requirement you have.
I'm using featherlight gallery to display a bunch of images in a lightbox. Everything works amazingly, I would just like to change the style of the arrows.
Reading the docs, I see that I can easily change the icon of the arrows with any character, but i don't understand how to change other style elements.
For example, I would like to make the arrows black instead of white and fix them, not just make them appear on hover.
So far I have an ugly solution where I use js to change the style attributes, like so
document.getElementsByClassName("featherlight-next")[0].getElementsByTagName("span")[0].style.color="black";
I'm a begginer with js, jquery, html and css, but I guess there must be a more elegant and practical solution.
I cannot change featherlight css since I'm loading it on the go from here:
cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.gallery.min.js
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.
I am learning HTML5 and Bootstrap, I have my parent container(fluid) inside which I have 3 div, I always use the code of bootstrap class(col-md/xs/sm/lg) to show how the UI should be for different view-portal
but how can I dynamically re-size these div using mouse drag over its borders? I mean like enlarging a image.
Also by increasing one div size the other two should dynamically re-size themselves within the container.
Is there any JS code which I can download? is there any thing to learn that might help me?
You might try Resizable component of RightJS UI if you want it to work out of the box.
After all, custom implementation in pure JavaScript is fairly simple: How to make HTML element resizable using pure javascript?
new to coding in general, so I'm kind of at a loss. I have a simple typewriter effect jquery script AND another simple javascript/ CSS trick to overlay one font on top of another. I am trying to combine the functionality of the two. I have found two ways to overlay the fonts with javascript/css, but the issue I have is this.
When the page loads, the typing script starts and at the same time the script for the font overlay runs, and since the typing script is just getting started, the font overlay does not apply to the typed text. The ticker code i am using is at https://github.com/stephband/jticker and the javascript/css is from here http://jsfiddle.net/4xgdv/1/ with th js part looking like this
$('.doublefont').each(function() {
$(this).attr('content', $(this).html());
and using the css class "doublefont" and the :after selector to copy and overlay the text.
Not looking for someone to code it for me, just a place to start in where things should go during the recursion and an idea how the overlay would fit in would be nice.
This is really beyond me, but I thought of something I wanted to see and it wont leave me alone, so any help would be appreciated!
I wrote the script for overlay text in this site and it's full open source.
try it:http://www.drabc.ir/