I'm trying to use a jQuery UI progressbar that would show in a jQuery UI dialog when I click on an asp:Button.
The Button is declared as follow :
<asp:Button ID="Button2" runat="server" Text="Télécharger"
CausesValidation="False" onclick="Button2_Click" OnClientClick="javascript:displayDialog()"/>
The dialog is declared as follow :
<div id="dialog" title="Attente de téléchargement">
<p>Le fichier est en cours de préparation, le téléchargement devrait commencer sous peu.</p>
<div id="progressbar"></div>
</div>
And eventually the javascript :
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").hide();
});
function displayDialog() {
$("#dialog").dialog();
$("#progressbar").progressbar({
value: false
});
$("#dialog").show();
}
</script>
This seems to work fine (since Both onclick and OnClientclick function are called). The code behind is executed correctly and the dialog shows too. However the animation of the progress bar doesnt work (see image below).
I don't understand what's going on. I've tried to not use show/hide but the property .css("display","none") and .css("display","block") of the $("#dialog") and the result is the same.
However If I don't hide the dialog on the $(document).ready the animation works fine. When I run this in the script tag:
$(document).ready(function () {
$("#dialog").dialog();
$("#progressbar").progressbar({
value: false
});
});
The dialog shows directly at the loading of the page like this :
which is correct (I obviously don't want it at the start but when you click on the button but still the progressbar shows correctly).
You are finding this issue because you have enclosed your progress bar within the dialog div
ERROR CODE:
<div id="dialog" title="Attente de téléchargement">
<p>Le fichier est en cours de préparation, le téléchargement devrait commencer sous peu.</p>
<div id="progressbar"></div>
</div>
Applying any changes to the Hidden elements would reflect.so better thing to do is to move the progress bar outside the dialog div.
CORRECTED CODE:
<div id="dialog" title="Attente de téléchargement">
<p>Le fichier est en cours de préparation, le téléchargement devrait commencer sous peu.</p>
</div>
<div id="progressbar"></div>
Happy Coding :)
Related
i'm learning Javascript and React and i got a problem.
i want to play a javascript function on a jsx files but i don't know where to put it.
i explain:
I want to make a mouseover effect, when "tech-title" is hover, i want to show "tech-text".
In the CSS, visibility is "hidden" for "tech-text"
I want to know what i'm doing wrong ...
thanks a lot ;)
const Resume = () => {
let techTitle = document.querySelectorAll('.tech-title')
let techText = document.querySelectorAll('.tech-text')
function cardDisplay() {
techTitle.addEventListener('mouseover', () => {
techText.style.visibility = 'visible'
})
}
return (
<div className="app-container">
<Profile />
<div className="right-container">
<Navigation />
<div className="display">
<h2 className="exp-title">A propos de moi</h2>
<p className="about-me">
Curieux de nature, je suis à la recherche d'un nouvel environnement de travail pour une première expérience
en tant que Développeur, je suis motivé et prêt à apprendre de nouvelles compétences.
</p>
<h3 className="skills">Skills</h3>
<div class="skill-content">
<div className="skill-card">
<i className="fa-solid fa-puzzle-piece"></i>
<h4 className="skill-title">Réflexion</h4>
<p className="skill-text">
Je trouve très stimulant le fait d'analyser un problème afin d'en trouver la solution
</p>
</div>
<div class="skill-card">
<i className="fa-solid fa-people-group"></i>
<h4 className="skill-title">Travail en équipe</h4>
<p className="skill-text">
Je suis à l'aise pour travailler en équipe ainsi que pour m'exprimer en public
</p>
</div>
<div className="skill-card">
<i className="fa-solid fa-user-ninja"></i>
<h4 className="skill-title">Capacité d'apatation</h4>
<p className="skill-text">
Je suis capable de m'adapter à tout type de situation ainsi que de gérer mon stress
</p>
</div>
<div className="skill-card">
<i className="fa-solid fa-lightbulb"></i>
<h4 className="skill-title">Curiosité</h4>
<p className="skill-text">
Curieux de nature, j'adore apprendre de nouvelles connaissances et compétences
</p>
</div>
</div>
<h3 className="skills">Tech</h3>
<div className="tech-container">
<div className="tech-card">
<div className="img-tech"></div>
<h4 className="tech-title">Html, CSS</h4>
<p className="tech-text">bla</p>
</div>
<div className="tech-card">
<div className="img-tech"></div>
<h4 className="tech-title">SASS</h4>
<p className="tech-text"></p>
</div>
<div className="tech-card">
<div className="img-tech"></div>
<h4 className="tech-title">Javascript</h4>
<p className="tech-text">bla</p>
</div>
<div className="tech-card">
<div className="img-tech"></div>
<h4 className="tech-title">React Js</h4>
<p className="tech-text">bla</p>
</div>
</div>
</div>
</div>
</div>
)
}
export default Resume
Depends on how you want to call your function inside yout JSX.
If you want to call your function every time your component renders you can just call it inside curly braces anywhere inside your JSX.
function myFunction() {
console.log('Hi, I rendered');
}
return (
<div>
{myFunction()}
</div>
)
If you want to call your function when an event happens, like a click event for example, you need to pass the function as a callback like so
function myOnClickFunction() {
console.log('I was clicked');
}
return (
<div>
<button onClick={myOnClickFunction}>Click me!</button>
</div>
)
Notice that I don't use the () when passing my function as a callback onClick={myOnClickFunction}, that is because I don't to run it now, I want to run it when the user clicks on it.
If you need to pass params inside your function you can write your callback as an arrow function and pass any params inside to it.
function myOnClickFunctionWithParams(name) {
console.log(`Hey ${name}, I was clicked`);
}
return (
<div>
<button onClick={() => myOnClickFunctionWithParams('John')}>Click me!</button>
</div>
)
In your case I think you will want to use onMouseEnter and onMouseLeave events on your div.
There are many default events you can use similar to onClick, you can fallback to this documentation anytime you have questions
React uses what's called a virtual-dom wich is built on top of the actual dom, and so they provide their own library of events methods, for your specific case, i would suggest you those react event methods:
onMouseEnter
and
onMouseLeave
learn more on how to handle mouse hover
You can use curly braces in your JSX to open a window to JavaScript, please refer the doc
First, a quick solution to the mouseover problem.
const Resume = () => {
const [hovered, setHovered] = useState(false);
return (
<div
onMouseOver={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
>
Text I want to show on mouse over
</div>
)
}
You'll see there's a lot less code than you're using, and no event listeners.. you're using what I like to call "psuedo React" - in many ways you're fighting against all of the reasons why React exists in first place!
There's a good video about this on YT: Stop Writing Fake React Code
My advice is to do some tutorials/courses on React and learn how to do the basics properly, it'll be time well spent!
On the "where to put my JS functions?" issue, in general, if the function depends upon any props or state from the component, then add it inside the component as a regular function.
If there are no dependents then the function is better off outside the component.. it's reusable, much easier to write unit tests for, and can't trigger any unexpected re-renders.
I have the following structure
JAVASCRIPT
//ID of container
$('a#modal_info').attr('rel','{handler: "iframe", size: {x: '+(width-(width*0.03))+', y: '+(height-(height*0.20))+'}}');
});
</script>
HTML
<!-- Esta parte é o Link para fazer a chamada -->
<div id="modal_info" class="modal barradofundo" onclick="window.location.href = this.getElementsByTagName('a')[0].href;">
SAIBA +
</div>
What am I trying to achieve here: The href element that uses the id modal_info is called by the javascript and opens a popup. I can't reproduce it here because it's a Joomla website, but it works. I need to achieve the same result with the div that uses the class barradofundo, as it is already clickable. How is it clickable? Because of the part onclick="window.location.href = this.getElementsByTagName('a')[0].href;"
Last year I published this one page site: www.rofeengenharia.com.br
In the Portifolio page if you click on "Abrir" it loads a dynamic div with javascript over the Portifolio page. In Safari and Firefox it is still working, but it stopped working in Chrome (it was working in Chrome too when I published it).
Here is part of the code:
The place where the dynamic div is loaded and the link to open it (onClick):
<DIV id="projeto_selecionado" style="position:absolute; z-index:20000; background:#ffffff;">
</DIV>
<!-- OBRA 1 -->
<DIV class="view view-sixth">
<IMG width="100%" height="auto" style="float:left;" src="images/portifolio/obra01/obra01_thumb_01.jpg" alt="Obra 01" />
<DIV class="mask">
<H2>Condomínio Jardim Acapulco</H2>
<P>Manutenção executada pela ROFE no litoral sul de São Paulo.</P>
Abrir
</DIV>
</DIV><!-- view -->
And the javascript file:
function exibir_projeto01()
{
$('<div/>').addClass("newdiv")
.html('<DIV id="projeto_selecionado">\
...
...
...
</DIV><!-- container_projeto_01 -->')
.appendTo($("#projeto_selecionado"))
.hide()
.fadeIn(1000);
// Não deixa a pagina voltar para o topo quando clica no link
event.preventDefault();
}
Anyone knows how to make it work in Chrome again?
Try using jQuery - remove the inline onclick and do this instead - also you try to add something with ID #projeto_selecionado to itself
$(".info").on("click",function(e) {
e.preventDefault();
$('<div/>').addClass("newdiv")
.html('<DIV>\
...\
...\
...\
</DIV>')
.appendTo("#projeto_selecionado")
.hide()
.fadeIn(1000);
});
WITHOUT html comments!
I want replace a div 'mainbox' that exist in html page 'index.html' with this that exist in html page 'list-div':
<body>
<div id="divet">
Sempre caro mi fu quest'ermo colle,
e questa siepe che da tanta parte dell'ultimo orizzonte
il guardo esclude
</div>
</body>
I did:
$(document).ready(function(){
$('#mainbox').load('list-div.html #hey');
});
but it don't run.
Help me please.
HTML
<div id="divet">
Sempre caro mi fu quest'ermo colle,
e questa siepe che da tanta parte dell'ultimo orizzonte
il guardo esclude
</div>
jQuery
$(document).ready(function(){
$('#mainbox').load('list-div.html #divet');
});
Your #hey id is not found, replace this with #divet
Try this way:
$(document).ready(function(){
var tempDom = $('<div></div>'); //create an element to store html
$('div', tempDom).load('list-div.html', function(){ //load page content
$('#mainbox').html($('#divet', tempDom).html()); //copy html content to mainbox element
});
});
I'm using wow.js for animations in my website with animate.css but when I test local here works perfectly but when I upload it to my server just not at all...
Here's my link to my website http://eloisemonteiro.hol.es/.
My js to call the wow.js
var wow = new WOW(
{
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: false
}
);
wow.init();
If you check the page 404 you will see that it works in there, here's the code of that one working:
<h1 id="fittext3" class="wow bounceIn">ERROR 404</h1>
And here the other image not working on my index page:
<div class="featurette" id="services">
<img class="featurette-image img-responsive pull-left wow bounceInLeft" src="img/customizacao.png" alt="Customizacao">
<h2 class="featurette-heading">Customização de LMS</h2>
<p class="lead">Customização da sua plataforma baseada na <mark>identidade visual</mark> de cada cliente com <mark>relatórios</mark> de acordo com cada necessidade.</p>
</div>
Needed to call wow in some setTimeout() because of my ajax page.