Chargement d'une page avec l'apparance désirée.
Résolu
Max747
Messages postés
264
Statut
Membre
-
Max747 Messages postés 264 Statut Membre -
Max747 Messages postés 264 Statut Membre -
Bonjour,
Dès que ma page http://localhost/onclick/onclick7.php se charge, apparait ceci:
Je souhaiterai plutôt qu'elle se présente ainsi:
Voici le script qui permet de passer à l'une ou l'autre de ces pages en cliquant sur le bouton "Effacer ou revoir" :
<?php
//exit("<br/> Stop");
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EcoWatt</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
iframe {
border: 0px solid red;
width: 100%;
}
.toggler {
display: flex;
justify-content: center;
align-items: center;
}
#button {
padding: .5em 1em;
text-decoration: none;
}
#effect {
position: relative;
width: 1000px;
height: 445px;
padding: 0.em;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
// run the currently selected effect - exécuter l'effet actuellement sélectionné
function runEffect() {
// get effect type from - obtenir le type d'effet de
var selectedEffect = $( "#effectTypes" ).val();
// Most effect types need no options passed by default - La plupart des types d'effets n'ont pas besoin d'options passées par défaut
var options = {};
// some effects have required parameters - certains effets ont des paramètres requis
if ( selectedEffect === "scale" ) {
options = { percent: 50 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } } ;
}
// Run the effect - Exécutez l'effet
$( "#effect" ).toggle( selectedEffect, options, 500 );
};
//Définir l'effet à partir de la valeur du menu de sélection
$( "#button" ).on( "click", function() {
runEffect();
});
} );
</script>
</head>
<body style="background-color: #ffffcc">
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<iframe src="https://www.monecowatt.fr/preview-homepage/"
title="La page EcoWatt consacrée à l'état du réseau électique en France." width="1000" height="450"></iframe>
</div>
</div>
<p style="text-align: center"><button id="button" class="ui-state-default ui-corner-all">Effacer ou revoir</button>
<select name="effects" id="effectTypes">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fade">Fade</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
</select></p>
<!--http://localhost/onclick/onclick7.php -->
</body>
</html>
Ce pendant, c'est à l'ouverture de la page que je préfèrerai obtenir cette apparence:
Ne m'y connaissant pas suffisamment en Jquery, quelqu' un peut il m'aider à obtenir le résultat que je recherche?
Je vous remercie d'avance pour votre aide.
Windows / Firefox 108.0
A voir également:
- Chargement d'une page avec l'apparance désirée.
- Supprimer une page word - Guide
- Imprimer tableau excel sur une page - Guide
- Créer une page facebook - Guide
- Comment traduire une page internet - Guide
- Page d'accueil - Guide
