I wanted to ask if anyone knows how I can implement something similar to reddit spoiler feature on a html page. I want it to be clickable to display the text behind it. (I looked into CSS, but they all seem to display on hover, but hide again when moved.
the class reddit uses is: "md-spoiler-text" but I couldn't figure out the script they use to do that.
Related
I am new to website coding. I am building a page and I am going to use animated headline js script. I want to know how can I add links to different words appearing to the animated headline in HTML or js.
I tried to update the code but every time I click the animated text only link with "steak" appears.
<b class="is-visible">pizza</b>
<b>sushi</b>
<b>steak</b>
Here is the source code.
https://codepen.io/Attrexx/pen/jAjvJo
you can use js/css library https://daneden.github.io/animate.css/ just read documentation, or search this library tutorials in youtube, with this library you can animate text and images
I'm trying to resolve a problem that I encountered with the creation of a tooltip interface in a website I'm developing. I constructed the tooltips with help of HTML, CSS and JavaScript. The script is pretty simple as you can see in the fiddle underneath, and is based on a toggle behaviour, on witch a trigger element open a pop-up tooltip.
jsFiddle
Now! My problem is that i can't figure out how to place the trigger on the top of everything so they are not hidden by the pop-ups! Let me explain. Since the pop-up, even when they are off, sometimes cover the trigger elemets they (the triggers) just result not clickable. is like they are hidden behind invisible pop-ups. Here is a link of how is right now online.
http://271116.lucamule.com/studio-1
I hope you can see the problem! Does anyone know how to resolve this?
You've changed the .pop-ups to "block" as soon as it initializes. $("div.pop-up").css({'display':'block','opacity':'0'})
If you want to show/hide, I would recommend using .fadeIn/.fadeOut: http://api.jquery.com/fadein/
i am looking to find out how i can display a background image, but then have parts of the image hidden so that it can be expanded by the user if need be. The reason being is that the height of the image is quite long and i want to be able to reduce this and make this interactive.
I have seen something similar on the following site, although this uses a parallax image, mine will just be a static image.
https://www.laduree.com/en_gb/
I would love to know the name of this feature and how something like this can be implemented.
If somebody could please help.
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/
I was trying to find a jQuery plugin that will achieve similar preloading effect like on this website Example, After intense research I wasn't able to find anything useful. Can anyone suggest a plugin that can achieve this?
Go to your Example page and inspect it with firebug ... If you remove the class="ready" from the body tag then you will see the actuall div that is overlayed over the entire page.
So all it is, is a div with transparency and an image at the center with a very high z-index.
When everything is loaded underneath you trigger a hide of the div ... and the page is there.
You could fire the hiding after the dom is ready or after a timeout etc...