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

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 '18 at 21:54

asked Nov 21 '18 at 21:19

John

76772751

Look at my answer to a similar question and the answer to the duplicate question

– Davide Candita
Nov 21 '18 at 23:41

add a comment |

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 '18 at 21:54

asked Nov 21 '18 at 21:19

John

76772751

Look at my answer to a similar question and the answer to the duplicate question

– Davide Candita
Nov 21 '18 at 23:41

add a comment |

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 '18 at 21:54

asked Nov 21 '18 at 21:19

John

76772751

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 '18 at 21:54

asked Nov 21 '18 at 21:19

John

76772751

edited Nov 21 '18 at 21:54

asked Nov 21 '18 at 21:19

John

76772751

edited Nov 21 '18 at 21:54

asked Nov 21 '18 at 21:19

John

76772751

asked Nov 21 '18 at 21:19

John

76772751

asked Nov 21 '18 at 21:19

John

76772751

Look at my answer to a similar question and the answer to the duplicate question

– Davide Candita
Nov 21 '18 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 '18 at 23:41

Look at my answer to a similar question and the answer to the duplicate question

– Davide Candita
Nov 21 '18 at 23:41

add a comment |

2 Answers
2

active

oldest

votes

Marquee is obsolete, and can have unexpected behavior.

edited Nov 21 '18 at 22:04

answered Nov 21 '18 at 21:46

pjones235

369115

add a comment |

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 '18 at 23:18

answered Nov 21 '18 at 22:13

Nunchy

815411

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 '18 at 22:33

You could probably achieve this using CSS3 animations.

– Nunchy
Nov 21 '18 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 '18 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',
autoActivateHeartbeat: false,
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

Marquee is obsolete, and can have unexpected behavior.

edited Nov 21 '18 at 22:04

answered Nov 21 '18 at 21:46

pjones235

369115

add a comment |

Marquee is obsolete, and can have unexpected behavior.

edited Nov 21 '18 at 22:04

answered Nov 21 '18 at 21:46

pjones235

369115

add a comment |

Marquee is obsolete, and can have unexpected behavior.

edited Nov 21 '18 at 22:04

answered Nov 21 '18 at 21:46

pjones235

369115

Marquee is obsolete, and can have unexpected behavior.

edited Nov 21 '18 at 22:04

answered Nov 21 '18 at 21:46

pjones235

369115

edited Nov 21 '18 at 22:04

answered Nov 21 '18 at 21:46

pjones235

369115

answered Nov 21 '18 at 21:46

pjones235

369115

answered Nov 21 '18 at 21:46

pjones235

369115

add a comment |

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 '18 at 23:18

answered Nov 21 '18 at 22:13

Nunchy

815411

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 '18 at 22:33

You could probably achieve this using CSS3 animations.

– Nunchy
Nov 21 '18 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 '18 at 23:19

add a comment |

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 '18 at 23:18

answered Nov 21 '18 at 22:13

Nunchy

815411

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 '18 at 22:33

You could probably achieve this using CSS3 animations.

– Nunchy
Nov 21 '18 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 '18 at 23:19

add a comment |

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 '18 at 23:18

answered Nov 21 '18 at 22:13

Nunchy

815411

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 '18 at 23:18

answered Nov 21 '18 at 22:13

Nunchy

815411

edited Nov 21 '18 at 23:18

answered Nov 21 '18 at 22:13

Nunchy

815411

answered Nov 21 '18 at 22:13

Nunchy

815411

answered Nov 21 '18 at 22:13

Nunchy

815411

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 '18 at 22:33

You could probably achieve this using CSS3 animations.

– Nunchy
Nov 21 '18 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 '18 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 '18 at 22:33

You could probably achieve this using CSS3 animations.

– Nunchy
Nov 21 '18 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 '18 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 '18 at 22:33

You could probably achieve this using CSS3 animations.

– Nunchy
Nov 21 '18 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 '18 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.

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

搜尋此網誌

Ytukyg