I know nothing about JavaScript (the main reason I chose to use Skrollr), and have been having issues with getting Skrollr working. I put this code at the end of my webpage:
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init();
</script>
Then I went to work. To test, I added the animation shown in the Skrollr documentation, where the text changes color, using this code:
<p class="lead" data-0="background-color:rgb(0,0,255);" data-500="background-color:(rgb255,0,0):">Blah blah blah.</p>
I upload it, no results. So I tried taking out the class, I'm a pretty mediocre coder at best, I just play with stuff, so I don't know if what I'm trying to do isn't possible. I think the class and the data- are conflicting. So I reupload, and by jove, still nothing. What's up with this? Here's a link to the page (I was testing Skrollr on the first section, the text that begins "An introductory studio course..."): http://jonathanalumbaugh.altervista.org/courserequests/photographyone.html
I'll also note that I want to use this to make the circled images expand from nothing to the size they are, kind of make them pop out as you scroll along, and make the "JA" cover image parallax scroll. But I want to get this thing working first. I'd also like to get the smooth scrolling thing turned but I have no idea where to do that. Probably a really simple question, so apologies in advance for the stupid questions.
I'm not sure whether I should ask another question for this or not, but once this does work, is it possible to animate stuff that already has a class applied to it, like I tried to do with <p class=lead data-0="background...?
I FORGOT TO ADD: Dreamweaver says "there is a syntax error on line 1 of skroll.min.js. Code hinting may not work until you fix this error." I don't know why, I haven't touched it. The first line of skroll.min.js says <!DOCTYPE html>.
You have mistake in this code (rgb), correct should be:
<p class="lead" data-0="background-color:rgb(0,0,255);" data-500="background-color: rgb(255,0,0)">Blah blah blah.</p>
Related
I wanted to have a message pop up in the middle of the page of my website when there is a important announcement like the one below. Any ideas of what to use. I tries looking at the code but I have no idea how to get it to work. Any ideas will be appreciated.
Image (My Idea of how it should look)
It looks like you have tagged 'javascript' on this question, so I will show you the most common way to do it completely using javascript.
Use the alert() function. The alert function takes one parameter — the text that you want to show. All browsers will present this in a different way. This is really easy to do and is recommended especially if you are just starting.
An example of implementing this on your HTML website:
<script type="text/javascript">
alert('My message goes here');
</script>
If you want to change the way this looks, you will have to use an HTML modal. By using that, you can customize the HTML&CSS to look exactly like the picture you attached.
To get started with that, I recommend you check out W3Schools tutorial on this: https://www.w3schools.com/howto/howto_css_modals.asp
I saw this post:
Random Div Order on Page Load
and the working solution was posted:
jsfiddle.net/BwJHj/1/
Which works each time I refresh that page ^ As soon as I make my own, or even just copy the exact HTML/CSS/JAVA from that demo, it doesn't work?
Just wondering why that may be.
Select Javascript from settings and it will work
without javascript : [https://jsfiddle.net/UserIsMonica/daw5nytd/][1] (no randomize)
with Javascript : [https://jsfiddle.net/UserIsMonica/daw5nytd/1/][2] (Randomize)
It's common first time Jsfiddle user can easily miss that. i did :)
happy coding !!
I don't know if any of you guys can help me out, but I've just purchased this plugin called Showoff and it doesn't work properly on my site - When clicking on the images, the description box doesn’t show up, but I can see the description text behind the other images. (There’s only description on the second image “Zink Design” in the gallery right now) The link to my site is http://live-it.dk/portfolio/
I have tried to get in touch with their own support, but the only answer they gave me was this:
"Make sure you have only one jquery loaded at all times and is loaded before every other js script that depend on jquery."
I think that I only have one jquery, but I'm fairly new with both html, css and javascript and so on, so I can't really get any further with this.
The gallery should look like this: http://codecanyon.net/item/showoff/full_screen_preview/6585732
Really hope you can help me, I am going to apply for internship this week, so I would really appreciate your help, so my site can be done.
Your page is including a lot of things, so this may not be the only problem. But you're doing exactly what their support said not to do, including two separate versions of jQuery:
<script src="http://live-it.dk/wp-includes/js/jquery/jquery.js?ver=1.11.0" type="text/javascript">
...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
My website is www.codtelevision.com.
If you look at the home page, it is perfect, but when you go to another page, it is big and looks weird. How do I fix it, and what is wrong? Thanks! If you need some code, I will be glad to post some, or you can view it on my site.
I just looked at chrome developer tools, and found this error:
Uncaught ReferenceError: jQuery is not defined
How do I fix this?
You have jQuery included after your jQuery code on your other pages (it needs to be included before). So you end up with just a block of code that isn't functioning as a ticker. Put the call before it and you'll be good.
its because the ticker expands the height as more content gets added and everything is positioned absolute, you need to position something other then absolute, maybe relative , or arrange the elements so they have room to expand
I think you forget add ticker-active class to your other pages. And make sure you call the initialize javascript function.
I believe the title already says it all, but here is my question:
what I want to know is how to realize a Office Wordlike "piece of paper" inputscreen.
I want to build a some kind of "newsletter renderer" which I want to show such an screen for the user.
only solution I could think of was an big <textarea> with some CSS styling.
(I already searched on the web but I still found nothing)
Excuse my writing, I'm not so great in English.
I have used the JavaScript-based "WYSIWYG editor" now. It 'works' , but for my own emailing backend (to come) I need to get the value out of there Iframe.
id of iframe is: #content_ifr .
in the iframe (what i've found) there is a < p > element where my/your submitted text is put in.
But if I put the following code in console, I get "an empty string" back:
console.debug($("#content_ifr").contents().find("p").contents().val());
or "undefined" :
console.debug($("#content_ifr").contents().find("p").contents().value);
what to do? :O
I will put latest version online asap: http://dominiquedebrabander.nl/nieuwsbrief
update:
console.debug(tinyMCE.get('content').startContent) is the way to get the content out of the iframe. (is it?) thanks (2 thirtydot ;))
I think i'm helped here, but I have 1 small question left (just because I am curious), how do they get the selected text? (to achieve underlines and bold on selected text).
"window.getSelection()" doesn't seem to work? or am I doing something wrong? :O
what I want to know is how to realize a Office Wordlike "piece of paper" inputscreen
It sounds like you're looking for a JavaScript-based "WYSIWYG editor".
Try TinyMCE, here's a relevant demo.