html menu animation completely broken? - javascript

I'm trying to teach myself front end development through online resources like w3schools.com and code academy and I have the very most basics down in HTML and CSS. I started a little portfolio web page project to test myself and see what I don't know. while following along with a menu icon animation tutorial on w3schools https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js I got stuck when my code animation didn't want to run. I copy and pasted the code from the tutorial into a new visual studio's file and it ran with no problem. I believe that it has to do with the fact that my Javascript code is in a different file and i linked it to HTML code improperly but when I moved it around it still didn't work so I'm at a complete lost as to what could be the problem. any help is much appreciated
HTML Code:
<!DOCTYPE html>
<html>
<head>
<link href="main page.css" rel="stylesheet">
<title>Cal's Blog</title>
</head>
<body>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script src="main page.js"></script>
</body>
CSS Code:
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
JavaScript Code:
function myFunction(x) {x.classlist.toggle("change");}

your function must be:
function myFunction(x) {
x.classList.toggle("change");
}
It's classList with capital "L" not "l".

looks like your problem is in the script tag,
<script src="main page.js"></script>
should probably be
<script src="main/page.js"></script>?

I looked here where the error is:
You mistakenly referenced the file, completely normal.
To make it work, you must navigate between the folders and select the file.
To do that, in my opinion, you should start by typing a "./" and then let VSCode (for example) show you which folders/files are in that directory.
Your JavaScript code have a mistake on "classlist", should be x.classList.toggle("change"); like W3Schools teach. That piece of code is CamelCase.
Here is the correct code, taking into account that you have a folder in the root of your project called "main", with the files "page.css" and "page.js"
<link type="text/css" rel="stylesheet" href="./main/page.css">
and
<script type="text/javascript" src="./main/page.js"></script>

Related

Can't add css class to element [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
This post was edited and submitted for review 1 year ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I am trying to add class to element.
.html5-video-player {
-webkit-transform: rotate(90deg) !important;
-moz-transform: rotate(90deg) !important;
-o-transform: rotate(90deg) !important;
-ms-transform: rotate(90deg) !important;
transform: rotate(90deg) !important;
}
test
I can't add CSS to element. I need to rotate in mobile devices. So I will later add bootstrap class #media (max-width: 767.98px) { to element after make it working.
Here is codepen.
I can't directly embed video in my website as I don't have space for that. I need it as link or link button. If watch_popup method don't work, I can also try bootstrap modal which has button, clicking on it will pop up embeded video. Rotating that to 90 degree to full screen also acceptable. Or any other javascript/jQuery method out there to make it happen? I need the rotation(Full screen) in mobile devices only.
I added the video content in <iframe>. Clicking <button> rotates <iframe> 90 degrees.
function rotate(){
document.getElementById("special-container").setAttribute("style", "display: inline !important");
document.getElementById("camera_view").setAttribute("style","transform: rotate(90deg)");
}
a{
background-color: #4CAF50;
border: none;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="rotate()">Rotate</a>
<div id="special-container" class="embed-responsive embed-responsive-16by9" style="display: none;">
<iframe id="camera_view" class="embed-responsive-item container well well-small span6"
style="height: 720px; width: 1280px; background-color: #2e2e2e;"
src="https://www.youtube.com/watch_popup?v=p-_qed5LTTg">
</iframe>
</div>
</body>
</html>
You forgot class="html5-video-player" in thé link 'a'

jQuery not working out of VScode, but does out of the Internet.. How can I fix this?

I am learning to build websites and at the moment I am coding in visual-studio code insiders, with most jQuery plugins installed.
When I open this url :
" http://www.completewebdevelopercourse.com/content/4-jquery/4.3.html "
which has identical source code as the code below,
I get two different results.
one, In which the java-script is working (this is the page from the link), and in the other(stored in a local folder and opened inside VScode), it is not.
I have consulted the VS-code website and forums. No luck and my problem is not mentioned at all. Only that there does not seem to be a good plugin for jQuery but snippet-packages, which I have installed.
And normal google-ling gives me all the same results in which people are asking for jQuery plugins as mentioned above
How can this be? And how do I fix it?
[code]
<!DOCTYPE html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
#circle {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: green;
margin: 10px;
}
.square {
width: 150px;
height: 150px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div id="circle"></div>
<div class="square"></div>
<div class="square"></div>
<script type="text/javascript">
$("div").click(function() {
alert("a div was clicked!");
});
</script>
</body>
Make sure that you downloaded the jquery.min.js file (you should place it in the same folder of the html page), otherwise it would go 404.

How to implement the nanoScroller so that it works correctly?

I'm sure I am missing something obvious and I have checked the other questions regarding this but none seem to have exactly my issue. I am new to Javascript but I'm sure this is a very simple script to implement on a website. If I can get it to work I can edit it from there and see how it works to further enhance it or remove from it.
Here is my code so that you can see exactly how i have it in the .html file
<!DOCTYPE>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="css/nanoscroller.css">
<script rel="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
<style type="text/css">
/* START NanoSlider */
.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane { background: #888; }
.nano .slider { background: #111; }
/* END NanoSlider */
</style>
<script>
$(document).ready(function(){
$(".nano").nanoScroller();
});
</script>
</head>
<body>
<div id="about" class="nano">
<div class="content">
This is the content box and it should be scrolling but it is not!! =/.
</div>
</div>
</body>
</html>
Here is a JSFiddle: http://jsfiddle.net/fcJr3/1/
Maybe I am linking in or refering to required files wrong? or possibly NOT linking in or referring to all the files I am suppose to?
As you can see in the JSFiddle I only get the box. I don't get the scroll bar or any of the effects. Your help is greatly appreciated, thanks!
EDIT: this is the nanoSlider here: http://jamesflorentino.github.io/nanoScrollerJS/
You need to include the jQuery library itself. You can download it or run it straight from the google cdn i.e.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your fiddle you need to include jquery using the dropdown top left i.e.
http://jsfiddle.net/fcJr3/2/

Override jQuery Mobile Background CSS

I am trying to override the typical jQuery Mobile background with a .jpg. I cannot, for the life of me, figure this out. It is driving me nuts! I have been all over SO and Google to no avail with anyone's answers.
My current header information
<head>
<title>Veolia Water Splash Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
<link rel="stylesheet" href="./css/stylo.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="./js/main.js"></script>
</head>
The process my application is following:
index.html loads as a picture fades in. (This CSS override works perfect)
After the image has faded in, I do a $.mobile.changePage() to another page, not a multipage format
This is where it fails, the background loads up, but then gets overridden by something. I just cannot seem to figure out what is overriding it.
This is my CSS
#logo
{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 80%;
}
body
{
background: url('../img/background.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
.ui-page .ui-body-c .ui-page-active .ui-overlay-c .ui-mobile-viewport
{
background: transparent !important;
}
Anyone have some pointers or know what I am doing wrong? The background flashes for a split second, but then gets tossed out...
Thanks in advance for any help!
First, you need commas between the CSS classes you are setting to transparent. Next, as ui-overlay-c is also applied to the body, you can set its background image along with the body's.
So together, set the transparency first, then the body background:
.ui-page, .ui-body-c, .ui-page-active, .ui-overlay-c, .ui-mobile-viewport
{
background: transparent !important;
}
body, .ui-overlay-c
{
background: url('http://www.hdwallpapers.in/wallpapers/digital_layers-1440x900.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
Here is a working fiddle of the above: http://jsfiddle.net/ezanker/5GgR9/

jquery kwicks issue

I've been working on my problem for the past few hours and am at the end of my rope. I need help.
I have a staging page where I tested the code and verfied that it works, but on the live page, the code refuses to budge. I can't figure out why kwicks jq seems to be ignoring the html on the jujumamablog.com header. <-- this is my question.
I'm using the kwicks for jQuery. I created a working sample page so I could be sure that the code was working before trying to integrate into the live area of the site. The sample page can be found here: http://jujumamablog.com/jujumama/dev.html
The code for the workingsample page is as follows
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Kwicks Examples: Example 1</title>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<style type="text/css">
/* defaults for all examples */
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
}
/* example 1 */
#example1 .kwicks li{
float: left;
width: 98px;
height: 200px;
margin-right: 2px;
}
#example1 #kwick1 {
background-color: #53b388;
}
#example1 #kwick2 {
background-color: #5a69a9;
}
#example1 #kwick3 {
background-color: #c26468;
}
#example1 #kwick4 {
background-color: #bf7cc7;
}
#example1 #kwick5 {
background-color: #bf7cc7;
margin-right: none;
}
</style>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 205,
spacing : 5
});
});
</script>
</head>
<body>
<div id="example1">
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
<li id="kwick5"></li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
I was hoping that this would be a fairly simple 'plug-and-play' instance. Boy, was I wrong.
My task was to get this slick piece running smoothly. I know there are other issues with the main site (jujumamablog.com), load time specifically, which I was told to ignore for the time being.
Edit-----------
I need to be a bit more clear here. The above code works, I'm wondering why, when I try to put the code into the live page (jujumamablog.com, where there are other scripts and -ish) that this stops working.
Thanks in advance.
It looks like you are including jQuery a second time, and since all those plugins are just methods of jQuery, you blow them all away.
The first one is on line 65, and the second is on line 91. All the plugins added between those two, are destroyed.
As a side note, you should consider consolidating all those scripts into one, then compress them with YUI compressor or whatever you prefer, and finally, if possible, put it at the bottom instead of at the top.
The $().ready(function() { looks wrong to me. I thought that the two ways of doing it were
$(function()
{
//etc
});
and
$(document).ready(function()
{
//etc
});
I get an error on this line:
jQuery('ul.sf-menu').superfish();
[Exception] TypeError: Object # has no method 'superfish'
It's possible this is stopping the rest of your ready events from firing.
I found out that the problem is that your live server uses a newer version of Jquery. I have the same problems but I don't know what's different between 1.2.6 and 1.4.2. Hopefully some answers will turn up!
Now I'm asking here: Plugin: Kwicks for Jquery works perfectly with Jquery 1.2.6 but not 1.4.2

Categories