Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you may not be able to execute some actions.

Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).

Modification of the background (for example, div) by jquery

jeanid last edited by

How do you change the background of the element by JQuery using ...animate?
Reply Quote 0
1 Reply Last reply

elysha

$("#menu a").hover(function(){
    $("#menu").css("background", "#f00");
},
function(){
    $("#menu").css("background", "#00f");
});

2
Posts

0
Views

Suggested Topics

A

Jquery animation to change text of a div
Software Programming • jquery html5 css3 animation effec languaget • • Avante

2

0
Votes

2
Posts

0
Views

A

First, CSS tb is math! But don't be scared, I'll explain the details. Second, you don't need JS or jQuery. .As vc commented, we will have 5 elements where each 1 gets 5s on the screen. Soon we will have 5x5 = 25, so our animation has to have 25 seconds.Now we will take our animation that goes from 0 to 100% and divide by 5, because it is 5 intervals of 5s, this tells us that every 20% of the animation corresponds to 5s.This means that from 0 to 20% my element is on the screen, completing 5s, then it passes the rest of the hidden animation. Thus every 5s appears the next element. The property animation-delay will prevent the animation of the elements from starting at the same time. Then each vc element has to increase 5s in delay, the second element has delay of 5s, third has delay 10s, room 15s etc...Thus you get the desired result. Run the code below to seeI left comments in code.texto { font-size: 3rem; font-weight: bold; position: absolute; opacity: 0; animation: fader 25s infinite; } /* cada texto tem um delay de 5 + o valor do delay anterior, meno o primeiro */ .a { animation-delay: 0s; } .b { animation-delay: 5s; } .c { animation-delay: 10s; } .d { animation-delay: 15s; } .e { animation-delay: 20s; } /* Animação acontece apenas entre 0 e 20%, pois são 5 elementos */ @keyframes fader { 10% { opacity: 1; } 20% { opacity: 0; } } .anima { height: 100px; }<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" /> <section id="meio"> <div class="container"> <div class="row"> <div id="descricao" class="col-sm-12 col-lg-6"> <p> <strong style="font-size: 50px; margin-botton:100px;"> SER</strong> bla bla bla: <strong style="color:#c8270a;font-weight:800;"> SABEDORIA </strong>,<strong style="color:#ecb213;font-weight:800;"> EMPATIA </strong> e <strong style="color:#0c5f93;font-weight:800;"> RESPEITO </strong> </p> <div class="anima"> <p class="texto a">Texto item 1</p> <p class="texto b">Texto item 2</p> <p class="texto c">Texto item 3</p> <p class="texto d">Texto item 4</p> <p class="texto e">Texto item 5</p> </div> </div> <div class="col-sm-12 col-lg-6"> <img class="img-fluid" src="https://placecage.com/100/100"> </div> </div> </div> </section>
O

Block the enter if the textarea is empty
Software Programming • javascript • • obi

2

0
Votes

2
Posts

0
Views

O

Use preventDefault Definition and UseThe preventive methodDefault () cancels the event if it is cancelable, which means that the default action that belongs to the event will not occur.For example, this can be useful when:Clicking on a "Send" button, prevent it from sending a formClicking on a link prevents the link from following the URLNote: Not all events are cancelable. Use the property https://www.w3schools.com/jsref/event_cancelable.asp to find out if an event is cancelable.Note: The preventive methodDefault () does not prevent further spread of an event through the DOM. Use stopPropagation () method to handle with that. Source: https://www.w3schools.com/jsref/event_preventdefault.asp Example: function blockEvent(e) { var code = (e.keyCode ? e.keyCode : e.which); if (code == 13 && document.getElementById("txt").value === "") { e.preventDefault(); } }<textarea id="txt" cols="40" rows="5" onkeypress="blockEvent(event, this)"></textarea>
search for a text in a long text with RegEx
Software Programming • javascript regex • • Laycee

2

0
Votes

2
Posts

0
Views

K

Try the following:const text = 'aaaaa8.469.505-kaaaaa'; const rt = "8.469.505-k"; const ex = '\b(\w*'+ rt +'\w*)\b'; const cleanT = text.replace(/ /g, ""); if( cleanT.match(new RegExp(ex, 'g')) ){ console.log("si encontro") }I don't see much problem with your code, except for a couple of lines that don't end in point and comma and the regex in string format, which lacked any counterbarra (in \w)Note that if you try to recycle the variable rt and ex to create new regular expressions dynamically, then you should not define them as constsince it will not be allowed to change.
J

Automatic active containers
Software Programming • jquery tabs • • juvenalb

2

0
Votes

2
Posts

0
Views

R

In your code, default tabs are scrupulously written like a defaulttab. Maybe it's already default on the side of the server. You need to either determine the case in which class defaulttab is placed on the side of the server or rewrite the line switch_tabs(jQuery('.defaulttab')); on the client's side.The code you've submitted doesn't understand how your system works.
Poner html in a div with jQuery
Software Programming • javascript html jquery • • emmalee

2

0
Votes

2
Posts

0
Views

A

You can use the function append()$("#ejemplo").append("<div> HTML de ejemplo </div>");
E

JQUERY Treatment to DIV
Software Programming • javascript jquery cs3 • • elysha

2

0
Votes

2
Posts

0
Views

B

http://api.jquery.com/css/ $("#flash").css('background-image', 'url(' + images[obj.curImg] + ')');
S

Autocomplete jQuery UI in background in Bootstrap modal
Software Programming • javascript modal autoc languageomplete fullc languagealendar • • simrah

2

0
Votes

2
Posts

0
Views

J

Place a z-index: 1050 in class .ui-autocomplete, which is the class of ul from the list of self-complete. Just enter the CSS:.ui-autocomplete{ z-index: 1050; } Depending on the order of shipments of CSS libs, you will need to include one !important:.ui-autocomplete{ z-index: 1050 !important; } See:$( function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); } );.ui-autocomplete{ z-index: 1050 !important; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Abrir modal </button> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="ui-widget"> <label for="tags">Digite "a": </label> <input id="tags"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
Problem background image in div
Software Programming • html5 css3 div bac languagekground • • Bogopo

2

0
Votes

2
Posts

0
Views

Buddy, try that.#content-homepage { margin-top: 0%; background-image: url(../img/back.jpg); background-size: contain; background-position: center; height: fit-content; width: 100%; width: auto; )
M

How can I move an object with jquery into a div?
Software Programming • jquery • • meriah

2

0
Votes

2
Posts

0
Views

E

Interesting but only with css and javascript will be quite complex could you say, think about using flash? well anyway I leave you a small example "animate" of jQuery, I hope it will serve you.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> </head> <style> div { position: absolute; background-color: #abc; left: 50px; width: 90px; height: 90px; margin: 5px; } </style> <body> <div class="block"></div> <br> <div id="parrafo"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </body> <script type="text/javascript"> $(document).keydown(function(event){ switch (event.which) { case 39: $(".block").animate({ "left": "+=50px" }, ""); break; case 37: $(".block").animate({ "left": "-=50px" }, ""); break; } }); </script> </html>
M

Is there any jQuery techniques in the library to remove text that does not replace the text <div> to the press and add it after?</div>
Software Programming • javascript jquery • • meriah

2

0
Votes

2
Posts

0
Views

C

To be added at the end of the container, a method may be used http://api.jquery.com/append/ function getFile() { $.get("https://epamekids.github.io/README.md", function(data) { $("#text").append(data); }); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="text"> <button onclick="getFile()" id="button">Get Information</button> </div>For addition after a selected element, not inside it, can be used using the method http://api.jquery.com/after/ function getFile() { $.get("https://epamekids.github.io/README.md", function(data) { $("#text").after(data); }); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="text"> <button onclick="getFile()" id="button">Get Information</button> </div>
S

Meat goes abroad =
Software Programming • javascript • • shizuka

2

0
Votes

2
Posts

0
Views

O

let a = document.querySelector('#block'); let b = document.querySelector('#ball'); window.onload = function() { setInterval(function() { b.style.marginLeft = Math.round(a.clientWidth / 2 - b.offsetWidth / 2 ) + 'px'; b.style.marginTop = Math.round(a.clientHeight / 2 - b.offsetHeight / 2) + 'px'; setTimeout(() => b.style.marginLeft = (a.clientWidth - b.clientWidth) + 'px', 1000); setTimeout(() => b.style.marginLeft = '', 2000); }, 3200) }#block { background: orange; transition: all 2s; border: 8px solid black; } #ball { width: 80px; height: 80px; transition: all 1s; }<div id="block"> <img id="ball" src="https://i.ibb.co/7jmdxFQ/23.png"> </div>
JS (or jQuery) how to add a function in div?
Software Programming • javascript jquery • • Mystic

2

0
Votes

2
Posts

0
Views

J

In your code. document.write(string); replaces all the contents of the html page string♪ Switch that line on. return string; and then it will be possible to insert a sgenerated html into any element, for example, $("#block").append(tableEditor(arr))♪ By the way, I don't know what the argument is for. someIdif it's not used in the function, so I took it away.var arr = [ [1, 2], [3, 4] ] function tableEditor(arr) { var string = "<table>"; for (var i = 0; i < arr.length; i++) { string += "<tr>"; for (var j = 0; j < arr.length; j++) { string += "<td>" + arr[i][j] + " </td>"; } string += "</tr>"; } string += "</table>"; return string; } $("#block").append(tableEditor(arr));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="block"></div>
jQuery function to select values in divs and play for an array
Software Programming • javascript html jquery array • • Alberto

2

0
Votes

2
Posts

0
Views

R

Try this:var array = []; $('.card-header').each(function(i) { array.push($(this).html()); }); $('.rodapeCat').html(JSON.stringify(array));<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <span class="card-header">Casa</span><br> <span class="card-header">Porta</span><br> <span class="card-header">Janela</span><br> <span class="card-header">Escada dos fundos</span><br> <hr/>  <div class="rodapeCat"><div>Use https://api.jquery.com/each/ to iterate the elements of a jQuery selector.One of the ways to convert an array into string is with https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify .To get the content one <div> or else set that content, use https://api.jquery.com/html/ .To add items in an array without having to worry about its size, use https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/push .
T

Jquery scroll fixed on top when clicking on a div #
Software Programming • javascript html jquery wordpress • • terrea

2

0
Votes

2
Posts

0
Views

O

//Efeito SliderDown/SliderUp $('.sub-menu a').click(function() { var anchor; var link = $(this).attr('href'); if (link.indexOf('#') !== -1) { anchor = '#' + link.split('#').pop(); console.log('anchor',anchor); } $('.id-sub').slideUp(2000); if (anchor !== undefined) { $(anchor).slideDown(2000).addClass('fixed'); $('html,body').animate({ 'scrollTop': $(anchor) }, 600, function(){ window.location.hash = target; }) } });
D

Automatic transition to beginning textarea
Software Programming • javascript php html cs • • derk

2

0
Votes

2
Posts

0
Views

F

For one-time insertion (any change will reset the carriage at the beginning):<textarea placeholder="...." onkeydown="" class="js-textarea hrobutt1244" style="width: 100%;" oninput="this.selectionStart=this.selectionEnd=0;"></textarea>If you need to work only when you get in. Ctrl + V:document.querySelector('.js-textarea').addEventListener('paste', function() { setTimeout(() => this.selectionStart = this.selectionEnd = 0, 10); });<textarea placeholder="...." class="js-textarea hrobutt1244" style="width: 100%;"></textarea>If the carriage is needed at the beginning of the current box:document.querySelector('.js-textarea').addEventListener('paste', function() { let nPos = this.selectionStart; setTimeout(() => this.selectionStart = this.selectionEnd = nPos, 10); });<textarea placeholder="...." class="js-textarea hrobutt1244" style="width: 100%;"></textarea>

Modification of the background (for example, div) by jquery

Suggested Topics

Jquery animation to change text of a div Software Programming • jquery html5 css3 animation effec languaget • • Avante

Block the enter if the textarea is empty Software Programming • javascript • • obi

search for a text in a long text with RegEx Software Programming • javascript regex • • Laycee

Automatic active containers Software Programming • jquery tabs • • juvenalb

Poner html in a div with jQuery Software Programming • javascript html jquery • • emmalee

JQUERY Treatment to DIV Software Programming • javascript jquery cs3 • • elysha

Autocomplete jQuery UI in background in Bootstrap modal Software Programming • javascript modal autoc languageomplete fullc languagealendar • • simrah

Problem background image in div Software Programming • html5 css3 div bac languagekground • • Bogopo

How can I move an object with jquery into a div? Software Programming • jquery • • meriah

Is there any jQuery techniques in the library to remove text that does not replace the text <div> to the press and add it after?</div> Software Programming • javascript jquery • • meriah

Meat goes abroad = Software Programming • javascript • • shizuka

JS (or jQuery) how to add a function in div? Software Programming • javascript jquery • • Mystic

jQuery function to select values in divs and play for an array Software Programming • javascript html jquery array • • Alberto

Jquery scroll fixed on top when clicking on a div # Software Programming • javascript html jquery wordpress • • terrea

Automatic transition to beginning textarea Software Programming • javascript php html cs • • derk

Jquery animation to change text of a div
Software Programming • jquery html5 css3 animation effec languaget • • Avante

Block the enter if the textarea is empty
Software Programming • javascript • • obi

search for a text in a long text with RegEx
Software Programming • javascript regex • • Laycee

Automatic active containers
Software Programming • jquery tabs • • juvenalb

Poner html in a div with jQuery
Software Programming • javascript html jquery • • emmalee

JQUERY Treatment to DIV
Software Programming • javascript jquery cs3 • • elysha

Autocomplete jQuery UI in background in Bootstrap modal
Software Programming • javascript modal autoc languageomplete fullc languagealendar • • simrah

Problem background image in div
Software Programming • html5 css3 div bac languagekground • • Bogopo

How can I move an object with jquery into a div?
Software Programming • jquery • • meriah

Is there any jQuery techniques in the library to remove text that does not replace the text <div> to the press and add it after?</div>
Software Programming • javascript jquery • • meriah

Meat goes abroad =
Software Programming • javascript • • shizuka

JS (or jQuery) how to add a function in div?
Software Programming • javascript jquery • • Mystic

jQuery function to select values in divs and play for an array
Software Programming • javascript html jquery array • • Alberto

Jquery scroll fixed on top when clicking on a div #
Software Programming • javascript html jquery wordpress • • terrea

Automatic transition to beginning textarea
Software Programming • javascript php html cs • • derk