jQuery Marquee scrolling text won't work within a Bootstrap Modal

up vote
0
down vote

favorite

I have a bootstrap modal which i want the marquee scrolling text in. However, it works outside of the modal, but not within it.

<marquee class="section-flash-marquee" behavior="alternate" scrolldelay="100">Bouncing text...</marquee>

Here is a DEMO:
http://jsfiddle.net/CxdUQ/3045/

So my question is how do I get the scrolling text working within the modal?

                    <marquee class="section-flash-marquee" behavior="alternate" scrolldelay="100">Bouncing text...</marquee>

^^ Or is there a CSS or jQuery way to recreate the above so the text scrolls back and forth?

Thanks

edited Nov 21 at 21:54

asked Nov 21 at 21:19

John

75072750

Look at my answer to a similar question and the answer to the duplicate question
– Davide Candita
Nov 21 at 23:41

add a comment |

up vote
0
down vote

favorite

I have a bootstrap modal which i want the marquee scrolling text in. However, it works outside of the modal, but not within it.

<marquee class="section-flash-marquee" behavior="alternate" scrolldelay="100">Bouncing text...</marquee>

Here is a DEMO:
http://jsfiddle.net/CxdUQ/3045/

So my question is how do I get the scrolling text working within the modal?

                    <marquee class="section-flash-marquee" behavior="alternate" scrolldelay="100">Bouncing text...</marquee>

^^ Or is there a CSS or jQuery way to recreate the above so the text scrolls back and forth?

Thanks

edited Nov 21 at 21:54

asked Nov 21 at 21:19

John

75072750

Look at my answer to a similar question and the answer to the duplicate question
– Davide Candita
Nov 21 at 23:41

add a comment |

up vote
0
down vote

favorite

I have a bootstrap modal which i want the marquee scrolling text in. However, it works outside of the modal, but not within it.

<marquee class="section-flash-marquee" behavior="alternate" scrolldelay="100">Bouncing text...</marquee>

Here is a DEMO:
http://jsfiddle.net/CxdUQ/3045/

So my question is how do I get the scrolling text working within the modal?

                    <marquee class="section-flash-marquee" behavior="alternate" scrolldelay="100">Bouncing text...</marquee>

^^ Or is there a CSS or jQuery way to recreate the above so the text scrolls back and forth?

Thanks

edited Nov 21 at 21:54

asked Nov 21 at 21:19

John

75072750

I have a bootstrap modal which i want the marquee scrolling text in. However, it works outside of the modal, but not within it.

<marquee class="section-flash-marquee" behavior="alternate" scrolldelay="100">Bouncing text...</marquee>

Here is a DEMO:
http://jsfiddle.net/CxdUQ/3045/

So my question is how do I get the scrolling text working within the modal?

                    <marquee class="section-flash-marquee" behavior="alternate" scrolldelay="100">Bouncing text...</marquee>

^^ Or is there a CSS or jQuery way to recreate the above so the text scrolls back and forth?

Thanks

                    <marquee class="section-flash-marquee" behavior="alternate" scrolldelay="100">Bouncing text...</marquee>

                    <marquee class="section-flash-marquee" behavior="alternate" scrolldelay="100">Bouncing text...</marquee>

jquery html css

edited Nov 21 at 21:54

asked Nov 21 at 21:19

John

75072750

edited Nov 21 at 21:54

asked Nov 21 at 21:19

John

75072750

edited Nov 21 at 21:54

asked Nov 21 at 21:19

John

75072750

asked Nov 21 at 21:19

John

75072750

asked Nov 21 at 21:19

John

75072750

Look at my answer to a similar question and the answer to the duplicate question
– Davide Candita
Nov 21 at 23:41

add a comment |

Look at my answer to a similar question and the answer to the duplicate question
– Davide Candita
Nov 21 at 23:41

Look at my answer to a similar question and the answer to the duplicate question
– Davide Candita
Nov 21 at 23:41

add a comment |

2 Answers
2

active

oldest

votes

up vote
0
down vote

Marquee is obsolete, and can have unexpected behavior.

edited Nov 21 at 22:04

answered Nov 21 at 21:46

pjones235

17910

add a comment |

up vote
0
down vote

As pointed out, the marquee is deprecated and may not give the results you require.

There are a few other plugins and libraries out there that you can use to achieve this, or you could roll your own:

DeSade requires jQuery

I wrote this a while ago, might be useful to you. Never used it with Bootstrap, though - you're welcome to use or modify it if it's any good to you:

<script src="DeSade.js"></script>



var duration = 15000;



// Create new instance

var marquis = new DeSade("id_of_parent_container", "id_of_new_marquee_element");

marquis.newMarquis("Text to display", duration);

Also pauses the scrolling effect on mouseover, you'll find a demo here -- just play the tracks, marquee scrolls along the top of the audio player.

It was a quick hack for a specific purpose so only goes one direction (right to left) but easy to modify for your purposes.

Hope it helps.

EDIT:

As I said in the below comment, something like this could be achieved with pure CSS, here's a very simple example that could be tweaked to suit your needs:

<!DOCTYPE html>

<html lang="en">

    <head>

        <style>

            #outer {

                position: absolute;

                top: 0%; left: 0%;

                width: 100%; height: 100%;

            }



            #inner {

                animation: marquee 10.0s infinite;

                position: absolute;

                width: 100%;

                text-align: center;

            }



            #marquee {

                width: auto;

                color: #F00;

            }



            @-webkit-keyframes marquee {

                0% { 

                    animation-timing-function: linear;

                    transform: translate(-45%, 0px);

                }

                50% { 

                    animation-timing-function: linear;

                    transform: translate(45%, 0px);

                }

                100% { 

                    animation-timing-function: linear;

                    transform: translate(-45%, 0px);

                }

            }

        </style>

    </head>

    <body>

        <div id="outer">

            <div id="inner">

                <div id="marquee">

                    Some text

                </div>

            </div>

        </div>

    </body>

</html>

Some tricks required to get the desired effect but maybe useful to you - maybe someone else with more CSS skills than myself can come up with something more flexible.

Hope this is helpful.

edited Nov 21 at 23:18

answered Nov 21 at 22:13

Nunchy

823410

I kind of need one that bounces back on itself like the demo. The examples i have been able to find all seem to go offscreen, then start again.
– John
Nov 21 at 22:33

You could probably achieve this using CSS3 animations.
– Nunchy
Nov 21 at 22:41

I've updated my answer with a simple example of what you're talking about using basic CSS animation/transitions.
– Nunchy
Nov 21 at 23:19

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420609%2fjquery-marquee-scrolling-text-wont-work-within-a-bootstrap-modal%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
0
down vote

Marquee is obsolete, and can have unexpected behavior.

edited Nov 21 at 22:04

answered Nov 21 at 21:46

pjones235

17910

add a comment |

up vote
0
down vote

Marquee is obsolete, and can have unexpected behavior.

edited Nov 21 at 22:04

answered Nov 21 at 21:46

pjones235

17910

add a comment |

up vote
0
down vote

Marquee is obsolete, and can have unexpected behavior.

edited Nov 21 at 22:04

answered Nov 21 at 21:46

pjones235

17910

Marquee is obsolete, and can have unexpected behavior.

edited Nov 21 at 22:04

answered Nov 21 at 21:46

pjones235

17910

edited Nov 21 at 22:04

answered Nov 21 at 21:46

pjones235

17910

answered Nov 21 at 21:46

pjones235

17910

answered Nov 21 at 21:46

pjones235

17910

add a comment |

up vote
0
down vote

As pointed out, the marquee is deprecated and may not give the results you require.

There are a few other plugins and libraries out there that you can use to achieve this, or you could roll your own:

DeSade requires jQuery

I wrote this a while ago, might be useful to you. Never used it with Bootstrap, though - you're welcome to use or modify it if it's any good to you:

<script src="DeSade.js"></script>



var duration = 15000;



// Create new instance

var marquis = new DeSade("id_of_parent_container", "id_of_new_marquee_element");

marquis.newMarquis("Text to display", duration);

Also pauses the scrolling effect on mouseover, you'll find a demo here -- just play the tracks, marquee scrolls along the top of the audio player.

It was a quick hack for a specific purpose so only goes one direction (right to left) but easy to modify for your purposes.

Hope it helps.

EDIT:

As I said in the below comment, something like this could be achieved with pure CSS, here's a very simple example that could be tweaked to suit your needs:

<!DOCTYPE html>

<html lang="en">

    <head>

        <style>

            #outer {

                position: absolute;

                top: 0%; left: 0%;

                width: 100%; height: 100%;

            }



            #inner {

                animation: marquee 10.0s infinite;

                position: absolute;

                width: 100%;

                text-align: center;

            }



            #marquee {

                width: auto;

                color: #F00;

            }



            @-webkit-keyframes marquee {

                0% { 

                    animation-timing-function: linear;

                    transform: translate(-45%, 0px);

                }

                50% { 

                    animation-timing-function: linear;

                    transform: translate(45%, 0px);

                }

                100% { 

                    animation-timing-function: linear;

                    transform: translate(-45%, 0px);

                }

            }

        </style>

    </head>

    <body>

        <div id="outer">

            <div id="inner">

                <div id="marquee">

                    Some text

                </div>

            </div>

        </div>

    </body>

</html>

Some tricks required to get the desired effect but maybe useful to you - maybe someone else with more CSS skills than myself can come up with something more flexible.

Hope this is helpful.

edited Nov 21 at 23:18

answered Nov 21 at 22:13

Nunchy

823410

I kind of need one that bounces back on itself like the demo. The examples i have been able to find all seem to go offscreen, then start again.
– John
Nov 21 at 22:33

You could probably achieve this using CSS3 animations.
– Nunchy
Nov 21 at 22:41

I've updated my answer with a simple example of what you're talking about using basic CSS animation/transitions.
– Nunchy
Nov 21 at 23:19

add a comment |

up vote
0
down vote

As pointed out, the marquee is deprecated and may not give the results you require.

There are a few other plugins and libraries out there that you can use to achieve this, or you could roll your own:

DeSade requires jQuery

I wrote this a while ago, might be useful to you. Never used it with Bootstrap, though - you're welcome to use or modify it if it's any good to you:

<script src="DeSade.js"></script>



var duration = 15000;



// Create new instance

var marquis = new DeSade("id_of_parent_container", "id_of_new_marquee_element");

marquis.newMarquis("Text to display", duration);

Also pauses the scrolling effect on mouseover, you'll find a demo here -- just play the tracks, marquee scrolls along the top of the audio player.

It was a quick hack for a specific purpose so only goes one direction (right to left) but easy to modify for your purposes.

Hope it helps.

EDIT:

As I said in the below comment, something like this could be achieved with pure CSS, here's a very simple example that could be tweaked to suit your needs:

<!DOCTYPE html>

<html lang="en">

    <head>

        <style>

            #outer {

                position: absolute;

                top: 0%; left: 0%;

                width: 100%; height: 100%;

            }



            #inner {

                animation: marquee 10.0s infinite;

                position: absolute;

                width: 100%;

                text-align: center;

            }



            #marquee {

                width: auto;

                color: #F00;

            }



            @-webkit-keyframes marquee {

                0% { 

                    animation-timing-function: linear;

                    transform: translate(-45%, 0px);

                }

                50% { 

                    animation-timing-function: linear;

                    transform: translate(45%, 0px);

                }

                100% { 

                    animation-timing-function: linear;

                    transform: translate(-45%, 0px);

                }

            }

        </style>

    </head>

    <body>

        <div id="outer">

            <div id="inner">

                <div id="marquee">

                    Some text

                </div>

            </div>

        </div>

    </body>

</html>

Some tricks required to get the desired effect but maybe useful to you - maybe someone else with more CSS skills than myself can come up with something more flexible.

Hope this is helpful.

edited Nov 21 at 23:18

answered Nov 21 at 22:13

Nunchy

823410

I kind of need one that bounces back on itself like the demo. The examples i have been able to find all seem to go offscreen, then start again.
– John
Nov 21 at 22:33

You could probably achieve this using CSS3 animations.
– Nunchy
Nov 21 at 22:41

I've updated my answer with a simple example of what you're talking about using basic CSS animation/transitions.
– Nunchy
Nov 21 at 23:19

add a comment |

up vote
0
down vote

As pointed out, the marquee is deprecated and may not give the results you require.

There are a few other plugins and libraries out there that you can use to achieve this, or you could roll your own:

DeSade requires jQuery

I wrote this a while ago, might be useful to you. Never used it with Bootstrap, though - you're welcome to use or modify it if it's any good to you:

<script src="DeSade.js"></script>



var duration = 15000;



// Create new instance

var marquis = new DeSade("id_of_parent_container", "id_of_new_marquee_element");

marquis.newMarquis("Text to display", duration);

Also pauses the scrolling effect on mouseover, you'll find a demo here -- just play the tracks, marquee scrolls along the top of the audio player.

It was a quick hack for a specific purpose so only goes one direction (right to left) but easy to modify for your purposes.

Hope it helps.

EDIT:

As I said in the below comment, something like this could be achieved with pure CSS, here's a very simple example that could be tweaked to suit your needs:

<!DOCTYPE html>

<html lang="en">

    <head>

        <style>

            #outer {

                position: absolute;

                top: 0%; left: 0%;

                width: 100%; height: 100%;

            }



            #inner {

                animation: marquee 10.0s infinite;

                position: absolute;

                width: 100%;

                text-align: center;

            }



            #marquee {

                width: auto;

                color: #F00;

            }



            @-webkit-keyframes marquee {

                0% { 

                    animation-timing-function: linear;

                    transform: translate(-45%, 0px);

                }

                50% { 

                    animation-timing-function: linear;

                    transform: translate(45%, 0px);

                }

                100% { 

                    animation-timing-function: linear;

                    transform: translate(-45%, 0px);

                }

            }

        </style>

    </head>

    <body>

        <div id="outer">

            <div id="inner">

                <div id="marquee">

                    Some text

                </div>

            </div>

        </div>

    </body>

</html>

Some tricks required to get the desired effect but maybe useful to you - maybe someone else with more CSS skills than myself can come up with something more flexible.

Hope this is helpful.

edited Nov 21 at 23:18

answered Nov 21 at 22:13

Nunchy

823410

As pointed out, the marquee is deprecated and may not give the results you require.

There are a few other plugins and libraries out there that you can use to achieve this, or you could roll your own:

DeSade requires jQuery

I wrote this a while ago, might be useful to you. Never used it with Bootstrap, though - you're welcome to use or modify it if it's any good to you:

<script src="DeSade.js"></script>



var duration = 15000;



// Create new instance

var marquis = new DeSade("id_of_parent_container", "id_of_new_marquee_element");

marquis.newMarquis("Text to display", duration);

Also pauses the scrolling effect on mouseover, you'll find a demo here -- just play the tracks, marquee scrolls along the top of the audio player.

It was a quick hack for a specific purpose so only goes one direction (right to left) but easy to modify for your purposes.

Hope it helps.

EDIT:

As I said in the below comment, something like this could be achieved with pure CSS, here's a very simple example that could be tweaked to suit your needs:

<!DOCTYPE html>

<html lang="en">

    <head>

        <style>

            #outer {

                position: absolute;

                top: 0%; left: 0%;

                width: 100%; height: 100%;

            }



            #inner {

                animation: marquee 10.0s infinite;

                position: absolute;

                width: 100%;

                text-align: center;

            }



            #marquee {

                width: auto;

                color: #F00;

            }



            @-webkit-keyframes marquee {

                0% { 

                    animation-timing-function: linear;

                    transform: translate(-45%, 0px);

                }

                50% { 

                    animation-timing-function: linear;

                    transform: translate(45%, 0px);

                }

                100% { 

                    animation-timing-function: linear;

                    transform: translate(-45%, 0px);

                }

            }

        </style>

    </head>

    <body>

        <div id="outer">

            <div id="inner">

                <div id="marquee">

                    Some text

                </div>

            </div>

        </div>

    </body>

</html>

Some tricks required to get the desired effect but maybe useful to you - maybe someone else with more CSS skills than myself can come up with something more flexible.

Hope this is helpful.

edited Nov 21 at 23:18

answered Nov 21 at 22:13

Nunchy

823410

edited Nov 21 at 23:18

answered Nov 21 at 22:13

Nunchy

823410

answered Nov 21 at 22:13

Nunchy

823410

answered Nov 21 at 22:13

Nunchy

823410

I kind of need one that bounces back on itself like the demo. The examples i have been able to find all seem to go offscreen, then start again.
– John
Nov 21 at 22:33

You could probably achieve this using CSS3 animations.
– Nunchy
Nov 21 at 22:41

I've updated my answer with a simple example of what you're talking about using basic CSS animation/transitions.
– Nunchy
Nov 21 at 23:19

add a comment |

I kind of need one that bounces back on itself like the demo. The examples i have been able to find all seem to go offscreen, then start again.
– John
Nov 21 at 22:33

You could probably achieve this using CSS3 animations.
– Nunchy
Nov 21 at 22:41

I've updated my answer with a simple example of what you're talking about using basic CSS animation/transitions.
– Nunchy
Nov 21 at 23:19

I kind of need one that bounces back on itself like the demo. The examples i have been able to find all seem to go offscreen, then start again.
– John
Nov 21 at 22:33

You could probably achieve this using CSS3 animations.
– Nunchy
Nov 21 at 22:41

I've updated my answer with a simple example of what you're talking about using basic CSS animation/transitions.
– Nunchy
Nov 21 at 23:19

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl