Does any know how to fix a MArque Code?

surajkay19 · March 15, 2017, 3:48am

I have this code below an it is not working. Does anyone know whats wrong?

<!DOCTYPE html>
<html>
<head>
</head>

<<body>

<ul class='marquee'>
    <li>1. text 1</li>
    <li>2.text 2</li>
    <li>3. text 3</li>
    <li>4. text 4</li>

    </ul>
</body>
<script>
function () {
  $('.marquee').marquee({
      duration: 15000,
      duplicate: true
  });
});
</script>

</html>

ralphm · March 15, 2017, 4:46am

What do you expect it to do?

If that’s your full code, then you’re missing a link to the jQuery library (or whatever library you’re using).

liontas76 · March 15, 2017, 6:50am

First you must invoke somehow the anonymous function that you have done. This is going happen or via IFEE or via events.For your example: First check that you have in the head of HTML code the CDN of marquee plugin to work marquee.

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.3.94/jquery.marquee.js"></script>
</head>

And then change (a little bit) your function so to be an IFEE. A good reference link that I found is this https://sarfraznawaz.wordpress.com/2012/01/26/javascript-self-invoking-functions/

Javascript code:

(function () {
  $('.marquee').marquee({
      duration: 15000,
      duplicate: true
  });
})();

surajkay19 · March 15, 2017, 1:23pm

IT still won’t work. Help. What did i do wrong?

<!DOCTYPE html>
<html>
<head>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.3.94/jquery.marquee.js"></script>
</head>
</head>

<<body>

<ul class='marquee'>
    <li>1. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>2. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>3. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>4. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>

    </ul>
</body>
<script>
(function () {
  $('.marquee').marquee({
      duration: 15000,
      duplicate: true
  });
})();
</script>

</html>

surajkay19 · March 15, 2017, 1:24pm

This piece of code suppose to display a message going from left to right across the screen and it suppose to show the 1 message then the second etc

WebMachine · March 15, 2017, 1:42pm

You still haven’t linked to the core JQuery code. Plus you have a number of errors in your html:

You have an extra <head> and </head> tag.
Your <body> tag has an extra < in front of it.
Your <script> code at the bottom of the page should go just before the closing </body> tag.
Just before your link to the marquee code, place this link to JQuery:

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

Then your marquee will work.

surajkay19 · March 15, 2017, 2:00pm

Still not working

<!DOCTYPE html>
<html>
<head>

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</head>

<body>

<ul class='marquee'>
    <li>1.Text 4</li>
    <li>2.text 3</li>
    <li>3.text 2</li>
    <li>4.text 1</li>

    </ul>
    <script>
    $(function () {
      $('.marquee').marquee({
          duration: 15000,
          duplicate: true
      });
    })();
    </script>
</body>


</html>

surajkay19 · March 15, 2017, 2:03pm

its working good here. but i dont know why i cant be able to run it on my page

Gandalf · March 15, 2017, 2:18pm

Now you don’t have the link to jquery.marquee.js

surajkay19 · March 15, 2017, 2:22pm

how do i get that?

surajkay19 · March 15, 2017, 2:30pm

I have this as my html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.marque.js" </script>
</head>

<body>

<ul class='marquee'>
    <li>1. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>2. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>3. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>4. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>

    </ul>
    <script>
    $(function () {
      $('.marquee').marquee({
          duration: 15000,
          duplicate: true
      });
    })();
    </script>
</body>


</html>

I have this as jquery.marque.js

$(function () {
    $('.marquee').marquee({
        duration: 15000,
        duplicate: true
    });
});

MY css

body {
    margin: 10px;
    font-family:'Lato', sans-serif;
}
.marquee {
    width: 100%;
    overflow: hidden;
    border:1px solid #ccc;
    background: black;
    color: rgb(202, 255, 195);
}
ul.marquee li {
    display: inline-block;
    padding: 10px 20px;
    font-size: 70px;
}

DaveMaxwell · March 15, 2017, 2:37pm

You’re missing the include to jquery (again) - this was in the rendered version of your jsfiddle…

<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

surajkay19 · March 15, 2017, 2:39pm

where do i put this code?

DaveMaxwell · March 15, 2017, 2:40pm

Right above your script tag in your html.

surajkay19 · March 15, 2017, 2:41pm

still not working

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<ul class='marquee'>
    <li>1. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>2. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>3. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>4. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>

    </ul>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
    <script>
    $(function () {
      $('.marquee').marquee({
          duration: 15000,
          duplicate: true
      });
    })();
    </script>
</body>


</html>

ronpat · March 15, 2017, 2:57pm

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <style>
body {
    margin: 10px;
    font-family:'Lato', sans-serif;
}
.marquee {
    width: 100%;
    overflow: hidden;
    border:1px solid #ccc;
    background: black;
    color: rgb(202, 255, 195);
}
ul.marquee li {
    display: inline-block;
    padding: 10px 20px;
    font-size: 70px;
}
    </style>
</head>
<body>
<ul class='marquee'>
    <li>1. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>2. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>3. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>4. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.3.94/jquery.marquee.js"></script>
<script>
$(function () {
    $('.marquee').marquee({
        duration: 15000,
        duplicate: true
    });
})();
</script>
</body>
</html>

WebMachine · March 15, 2017, 2:59pm

You have to have the link to the JQuery code, and then the link to the marquee.js code. You are just replacing one with the other each time you make a change. You need both. If you had followed the instructions I posted earlier, it would have worked.

DaveMaxwell · March 15, 2017, 3:04pm

This works…which matches what @ronpat did

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
	body {
    margin: 10px;
    font-family:'Lato', sans-serif;
}
.marquee {
    width: 100%;
    overflow: hidden;
    border:1px solid #ccc;
    background: black;
    color: rgb(202, 255, 195);
}
ul.marquee li {
    display: inline-block;
    padding: 10px 20px;
    font-size: 70px;
}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
    <script>
		$(function () {
			$('.marquee').marquee({
				duration: 15000,
				duplicate: true
			});
		})();
    </script>
</head>
<body>
<ul class='marquee'>
    <li>1. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>2. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>3. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    <li>4. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
    </ul>
</body>
</html>

surajkay19 · March 15, 2017, 3:26pm

Why do you include these two code? Whats the purpose?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>

The code works thank you all

Gandalf · March 15, 2017, 3:29pm

One is jQuery, the other is the marquee