rych54

Cześć. Mam napisany formularz kontaktowy jednak nie podoba mi się to, że jako zabezpieczenie antyspamowe jest podawanie wyniku. Czy da to się jakoś obejść? W załączniku pliki formularza. Z góry dzięki za pomoc formularz.zip

Cześć. Mam problem. Stworzyłem stronę: http://krzysztofswitala.com/axirnew/gale.html i gdy chce z tej podstrony wrócić do np. sekcji kontakt na stronie głównej to przenosi mnie cały na samą górę strony. Wiem już, że problem jest z preloaderem i do pliku main.js trzeba dodać kod jQuery('html, body').animate({ scrollTop: jQuery(location.hash).offset().top }, 2000); Tylko mam problem bo nie wiem, w którym miejscu dodać ten fragment aby wszystko działało poprawnie. Z góry dzięki za pomoc. main.js /** * main.js * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2014, Codrops * http://www.codrops.com */ (function() { var support = { animations : Modernizr.cssanimations }, container = document.getElementById( 'ip-container' ), header = container.querySelector( 'header.ip-header' ), loader = new PathLoader( document.getElementById( 'ip-loader-circle' ) ), animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' }, // animation end event name animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ]; function init() { var onEndInitialAnimation = function() { if( support.animations ) { this.removeEventListener( animEndEventName, onEndInitialAnimation ); } startLoading(); }; // disable scrolling window.addEventListener( 'scroll', noscroll ); // initial animation classie.add( container, 'loading' ); if( support.animations ) { container.addEventListener( animEndEventName, onEndInitialAnimation ); } else { onEndInitialAnimation(); } } function startLoading() { // simulate loading something.. var simulationFn = function(instance) { var progress = 0, interval = setInterval( function() { progress = Math.min( progress + Math.random() * 0.1, 1 ); instance.setProgress( progress ); // reached the end if( progress === 1 ) { classie.remove( container, 'loading' ); classie.add( container, 'loaded' ); clearInterval( interval ); var onEndHeaderAnimation = function(ev) { if( support.animations ) { if( ev.target !== header ) return; this.removeEventListener( animEndEventName, onEndHeaderAnimation ); } classie.add( document.body, 'layout-switch' ); window.removeEventListener( 'scroll', noscroll ); }; if( support.animations ) { header.addEventListener( animEndEventName, onEndHeaderAnimation ); } else { onEndHeaderAnimation(); } } }, 80 ); }; loader.setProgressFn( simulationFn ); } function noscroll() { window.scrollTo( 0, 0 ); } init(); })();

Dzięki bardzo! Działa teraz fajowsko!

Nie rozumiem. Nie ogarniam jeszcze js więc mam z tym problem. Mógłbyś mi to wstawić w ten kod?

Nie wiem czy oto chodziło z plikiem main.js /** * main.js * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2014, Codrops * http://www.codrops.com */ (function() { var support = { animations : Modernizr.cssanimations }, container = document.getElementById( 'ip-container' ), header = container.querySelector( 'header.ip-header' ), loader = new PathLoader( document.getElementById( 'ip-loader-circle' ) ), animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' }, // animation end event name animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ]; function init() { var onEndInitialAnimation = function() { if( support.animations ) { this.removeEventListener( animEndEventName, onEndInitialAnimation ); } startLoading(); }; function noscroll() { window.scrollTo( 0, 0 ); } // initial animation classie.add( container, 'loading' ); if( support.animations ) { container.addEventListener( animEndEventName, onEndInitialAnimation ); } else { onEndInitialAnimation(); } } function startLoading() { // simulate loading something.. var simulationFn = function(instance) { var progress = 0, interval = setInterval( function() { progress = Math.min( progress + Math.random() * 0.1, 1 ); instance.setProgress( progress ); // reached the end if( progress === 1 ) { classie.remove( container, 'loading' ); classie.add( container, 'loaded' ); clearInterval( interval ); var onEndHeaderAnimation = function(ev) { if( support.animations ) { if( ev.target !== header ) return; this.removeEventListener( animEndEventName, onEndHeaderAnimation ); } classie.add( document.body, 'layout-switch' ); window.removeEventListener( 'scroll', noscroll ); }; if( support.animations ) { header.addEventListener( animEndEventName, onEndHeaderAnimation ); } else { onEndHeaderAnimation(); } } }, 80 ); }; loader.setProgressFn( simulationFn ); } function noscroll() { window.scrollTo( 0, 0 ); } init(); })();

Ok super już jest prawie dobrze tylko czy da się tak zrobić aby po załadowaniu preloadera pokazywała się od razu sekcja np. O nas, Usługi itp a nie od samej góry przejeżdżało? Bo teraz wygląda to tak: http://krzysztofswitala.com/axirnew/gale.html

Niestety nie działa

Cześć. Mam formularz kontaktowy, którego kod poniżej chciałbym aby po przyjściu wiadomość na email zamiast "Wiadomość ze strony internetowej" wyświetlały się te elementy: contact_name , contact_service. W jaki sposób mam to zapisać aby wszystko działało poprawnie? $mail->Subject = 'Wiadomość ze strony internetowej'; chciałbym aby po przyjściu wiadomość na email zamiast "Wiadomość ze strony internetowej" wyświetlały się te elementy: contact_name , contact_service <?php require_once 'class.phpmailer.php'; $_POST = array_map('trim', $_POST); $error = false; if (!isset($_POST['contact_name']) || empty($_POST['contact_name'])) { $error = true; } if (!isset($_POST['contact_email']) || empty($_POST['contact_email']) || !PHPMailer::ValidateAddress($_POST['contact_email'])) { $error = true; } if (!isset($_POST['contact_phone']) || empty($_POST['contact_phone'])) { $error = true; } if (!isset($_POST['contact_service']) || empty($_POST['contact_service'])) { $error = true; } if (!isset($_POST['contact_body']) || empty($_POST['contact_body'])) { $error = true; } if ($error) { exit('nok'); } $mail = new PHPMailer(); $mail->CharSet = 'UTF-8'; $mail->SetFrom($_POST['contact_email'], $_POST['contact_name']); $mail->AddAddress('kontakt@adres.com'); $mail->Subject = 'Wiadomość ze strony internetowej'; $mail->Body = $_POST['contact_body']; $mail->SetFrom($login, $_POST['contact_name']); $mail->AddAddress($email); $mail->Subject = 'Wiadomość ze strony internetowej'; $mail->Body = $_POST['contact_body'] . "\n\nImię i Nazwisko: " . $_POST['contact_name'] . "\n\nE-mail: " . $_POST['contact_email'] . "\n\nTelefon: " . $_POST['contact_phone'] . "\n\nUsługa: " . $_POST['contact_service']; if (!$mail->Send()) { exit('nok'); } exit('ok');

Działa dzięki!

Cześć. Mam problem z mapą Google. Mianowicie za pomocą .fadeIn zrobiłem aby po kliknięciu na adres wyświetliła się mapa w topie strony. Skrypt wydaję mi się, że działa poprawnie, lecz mapa wyświetla się w ten sposób: Błąd leży chyba po stronie Css ponieważ dla mapy w kodzie mam "display: none" Czy ktoś wie z czym to może być problem? Kod odpowiedzialny za adresy: <div class="foto-contact"><div id="map"></div></div> <section class="branch"> <div class="container"> <div id="map-side-bar"> <div class="row"> <div class="col-md-3"> <div class="map-location" data-jmapping="{id: 1, point: {lng: 2.632177, lat: 48.826631}, category: 'company'}"> <a href="#" class="map-link"> <address> <strong>ATE CROISSY-BEAUBOURG</strong><br> 5, rue Pelloutier<br> 77183 CROISSY-BEAUBOURG<br> Tél: 09 63 62 74 34<br> <a href="mailto:ateidf@orange.fr">ateidf@orange.fr</a> </address> </a> <div class="info-box"> <p>A great place to get all your groceries, especially fresh fruits and vegetables.</p> </div> </div> </div> <div class="col-md-3"> <div class="map-location" data-jmapping="{id: 2, point: {lng: 5.653325, lat: 45.536604}, category: 'company'}"> <a href="#" class="map-link"> <address> <strong>SIEGE SOCIAL ATE</strong><br> 61 bis, Avenue de la Folatiére<br> 38480 PONT DE BEAUVOISIN<br> Tél: 04 76 32 82 22<br> <a href="mailto:atepont@wanadoo.fr">atepont@wanadoo.fr</a> </address> </a> <div class="info-box"> <p>A great place to get all your groceries, especially fresh fruits and vegetables.</p> </div> </div> </div> <div class="col-md-3"> <div class="map-location" data-jmapping="{id: 3, point: {lng: 5.628112, lat: 43.295388}, category: 'company'}"> <a href="#" class="map-link"> <address> <strong>AGENCE SUD</strong><br> 380, av. du Garlaban - PA de Gemenos, 13420 GEMENOS<br> Tél: 04 42 08 08 30<br> <a href="mailto:atesud@wanadoo.fr">atesud@wanadoo.fr</a> </address> </a> <div class="info-box"> <p>A great place to get all your groceries, especially fresh fruits and vegetables.</p> </div> </div> </div> <div class="col-md-3"> <address> <strong>Antene technique<br> NANCY</strong><br> Tél: 06 43 72 80 85<br> </address> </div> </div> <div class="row"> <div class="col-md-3"> <address> <strong>Antene technique<br> STRASBOURG</strong><br> Tél: 06 38 81 70 50<br> </address> </div> <div class="col-md-3"> <address> <strong>Antene technique<br> NANTES</strong><br> Tél: 06 16 53 10 22<br> </address> </div> <div class="col-md-3"> <address> <strong>Antene technique<br> TARBES</strong><br> Tél: 06 31 58 51 34<br> </address> </div> </div> </div> </div> Skrypty <script src="js/bootstrap.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="js/markermanager.js"></script> <script type="text/javascript" src="js/StyledMarker.js"></script> <script type="text/javascript" src="js/jquery.metadata.js"></script> <script type="text/javascript" src="js/jquery.jmapping.js"></script> <script> $(document).ready(function(){ $(".map-link").click(function(){ $("#map").fadeIn("fast"); }); }); </script> <script type="text/javascript"> $(document).ready(function(){ $('#map').jMapping({ map_config: { navigationControlOptions: { style: google.maps.NavigationControlStyle.DEFAULT }, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}] } }); }); </script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script type="text/javascript"> //Add Hover effect to menus jQuery('ul.nav li.dropdown').hover(function() { jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn(); }, function() { jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(); }); </script>

Cześć. Czy wie ktoś jak zrobić taki efekt przejść między podstronami jak tutaj: http://plej.pl/ że tło się zmienia delikatnie na białe i ładuję inna podstronę. Czy można to zrobić w css czy lepiej ograć w js?

A pomożesz mi coś takiego zrobić? Rozumiem, że najpierw do body muszę dodać: style="opacity: 1;" a potem coś zrobić aby zmniejszało po kliknięciu opacity do 0 tylko jak to zrobić?

Witam. Stworzyłem stronę i skupiłem się trochę na animacji używając przy jej tworzeniu animate.css . Wszystko fajnie, animacja działa tylko chciałbym ją wyłączyć ja telefonach. Napisałem taki skrypt który mi dorzuca klasy do divów wp1, customer1 - customer5 . Chciałbym zrobić tak aby na rozdzielczości smartphona ten skrypt nie dopisywał mi tych klas. Czy ma ktoś pomysł jak to obejść ? $(document).ready(function() { $('.wp1').waypoint(function() { $('.wp1').addClass('animated fadeInLeft'); }, { offset: '75%' }); $('.customer1').waypoint(function() { $('.customer1').addClass('animated fadeInUp'); }, { offset: '55%' }); $('.customer2').waypoint(function() { $('.customer2').addClass('animated fadeInUp'); }, { offset: '55%' }); $('.customer3').waypoint(function() { $('.customer3').addClass('animated fadeInUp'); }, { offset: '55%' }); $(' .customer4').waypoint(function() { $(' .customer4').addClass('animated fadeInUp'); }, { offset: '55%' }); $(' .customer5').waypoint(function() { $(' .customer5').addClass('animated fadeInUp'); }, { offset: '55%' }); });

Działa pięknie! Dziękuję

Rozumiem, że wszystkie klasy css z pliku animate.css wrzucić w: @media all and (max-width: 1000px) and (min-width: 700px) { }

Cześć. Stworzyłem formularz w oparci o php. Wszystko fajnie mi działa tylko mam problem z załadowanie pliku na serwer i aby wysyłał on się na email. Próbowałem już masę razy testować różne kody z internetu i nic. Gdyby ktoś chciał mi pomóc to załączam link do paczki z plikami. Będę bardzo wdzięczny za pomoc! http://speedy.sh/5M3s8/form.rar

Nie wiem jak to sprawdzić w php jestem na początku drogi...

Witam! Znalazłem skrypt karuzeli w internecie tylko po pobraniu w paczce są tylko skrypty i nie mam zielonego pojęcia jak zainstalować dosyć fajny skrypt z tej strony:http://darsa.in/sly/ a dokładnie http://darsa.in/sly/examples/horizontal.html przykład Force Centered. Pomoże ktoś?

Używam bootstrapa i classy typu img-responsive od bootstrapa nie pomagają.

No aby zdjęcia były responywne. Wszystko mi się sypie jak coś zmienie itp.

Wiem tylko mam spore problemy

a jak to jest zrobione tutaj: http://demo.cosmothemes.com/tripod-colored/gallery/sed-at-ligula-at-ipsum-bibendum-mollis-id/? nie można jakoś tego wyciągnąć bo to ta sama wtyczka

Działa tylko teraz chciałbym jeszcze zrobić to responsywne tylko nie wiem jak. Generalnie chce osiągnąć taki efekt: http://demo.cosmothemes.com/tripod-colored/gallery/sed-at-ligula-at-ipsum-bibendum-mollis-id/ a kod: <div class="scrollbar"> <div class="handle"> <div class="mousearea"></div> </div> </div> <div class="frame" id="forcecentered"> <ul class="clearfix"> <li><img src="img/1a.jpg" class="img-responsive"/></li> <li><img src="img/1b.jpg" /></li> <li><img src="img/1c.jpg" /></li> <li><img src="img/1a.jpg" /></li> <li><img src="img/1b.jpg" /></li> </ul> </div> <div class="controls center"> <button class="btn prev"><i class="icon-chevron-left"></i> prev</button> <button class="btn next">next <i class="icon-chevron-right"></i></button> </div> /* Frame */ .frame { overflow: hidden; } .frame ul { list-style: none; margin: 0; padding: 0; height: 100%; font-size: 50px; } .frame ul li { float: left; margin: 0 1px 0 0; padding: 0; background: #333; color: #ddd; text-align: center; cursor: pointer; } .frame ul li.active { color: #fff; background: #a03232; } /* Scrollbar */ .scrollbar { margin: 0 0 1em 0; height: 2px; background: #ccc; line-height: 0; } .scrollbar .handle { width: 100px; height: 100%; background: #292a33; cursor: pointer; } .scrollbar .handle .mousearea { position: absolute; top: -9px; left: 0; width: 100%; height: 20px; } /* Pages */ .pages { list-style: none; margin: 20px 0; padding: 0; text-align: center; } .pages li { display: inline-block; width: 14px; height: 14px; margin: 0 4px; text-indent: -999px; border-radius: 10px; cursor: pointer; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); } .pages li:hover { background: #aaa; } .pages li.active { background: #666; } /* Controls */ .controls { margin: 25px 0; text-align: center; } /* One Item Per Frame example*/ .oneperframe { height: 300px; line-height: 300px; } .oneperframe ul li { width: 1140px; } .oneperframe ul li.active { background: #333; } /* Crazy example */ .crazy ul li:nth-child(2n) { width: 100px; margin: 0 4px 0 20px; } .crazy ul li:nth-child(3n) { width: 300px; margin: 0 10px 0 5px; } .crazy ul li:nth-child(4n) { width: 400px; margin: 0 30px 0 2px; } /* Effects */ .effects { height: 200px; line-height: 200px; -webkit-perspective: 800px; -ms-perspective: 800px; perspective: 800px; -webkit-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; overflow-y: show; } .effects ul { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .effects ul li { position: relative; margin: 0 -20px; -webkit-transform: rotateY(60deg) scale(0.9); -ms-transform: rotateY(60deg) scale(0.9); transform: rotateY(60deg) scale(0.9); -webkit-transition: -webkit-transform 300ms ease-out; transition: transform 300ms ease-out; } .effects ul li.active { z-index: 10; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .effects ul li.active ~ li { -webkit-transform: rotateY(-60deg) scale(0.9); -ms-transform: rotateY(-60deg) scale(0.9); transform: rotateY(-60deg) scale(0.9); }

Nic to nie dało, wszystko wyświetla się w pionie W konsoli nie pokazuję mi klas frame i slidee które są w plik horizontal.css. Nie wiem czemu.

Cały kod strony: <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link rel="stylesheet" href="css/lightbox.css" media="screen"/> <link rel="stylesheet" media="screen" href="css/horizontal.css" /> <link rel="stylesheet" media="screen" href="css/style.css" /> <noscript> <link rel="stylesheet" type="text/css" href="css/noscript.css" /> </noscript> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <nav id="page" class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">AGENCJA OXIMA</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav navbar-right menu"> <li><a href="index.html">Home</a></li> <li><a href="oferta.html">Oferta</a></li> <li class="active"><a href="hostessy.html">Hostessy</a></li> <li><a href="hosci.html">Hości</a></li> <li><a href="#">Aktualności</a></li> <li><a href="casting.html">Casting</a></li> <li><a href="kontakt.html">Kontakt</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> </div> <div id="ei-slider" class="ei-slider"> <ul class="ei-slider-large"> <li> <img src="img/1.jpg" alt="image01" /> <div class="ei-title"> <h2>Creative Duet</h2> <h3>Rebel</h3> </div> </li> <li> <img src="img/2.jpg" alt="image02" /> <div class="ei-title"> <h2>Friendly</h2> <h3>Devil</h3> </div> </li> <li> <img src="img/3.jpg" alt="image03"/> <div class="ei-title"> <h2>Life style</h2> <h3>New colection- autumn / winter 2013</h3> </div> </li> <li> <img src="img/4.jpg" alt="image04"/> <div class="ei-title"> <h2>Insecure</h2> <h3>Hussler</h3> </div> </li> <li> <img src="img/6.jpg" alt="image06"/> <div class="ei-title"> <h2>Passionate</h2> <h3>Seeker</h3> </div> </li> <li> <img src="img/7.jpg" alt="image07"/> <div class="ei-title"> <h2>Crazy</h2> <h3>Friend</h3> </div> </li> </ul><!-- ei-slider-large --> <ul class="ei-slider-thumbs"> <li class="ei-slider-element">Current</li> <li><a href="#">Slide 1</a></li> <li><a href="#">Slide 2</a></li> <li><a href="#">Slide 3</a></li> <li><a href="#">Slide 4</a></li> <li><a href="#">Slide 5</a></li> <li><a href="#">Slide 6</a></li> </ul><!-- ei-slider-thumbs --> </div><!-- ei-slider --> <div class="container"> <div class="page-header"> <h1 class="naglowek">Galeria hostess</h1> <p style="border-bottom: 4px solid #dccc99; width: 40%;"></p> </div> <div id="scrollbar"> <div class="handle"></div> </div> <div id="frame"> <ul class="slidee"> <li>1</li> // Item <li>1</li> // Item <li>1</li> // Item </ul> </div> <div class="controls center"> <button class="btn prev disabled" disabled=""><i class="icon-chevron-left"></i> prev</button> <button class="btn next">next <i class="icon-chevron-right"></i></button> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script src="js/lightbox-2.6.min.js"></script> <script type="text/javascript" src="js/jquery.eislideshow.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() { $('#ei-slider').eislideshow({ animation : 'center', autoplay : true, slideshow_interval : 3000, titlesFactor : 0 }); }); </script> <script src="js/jquery.ui.totop.js" type="text/javascript"></script> <script src="js/horizontal.js" type="text/javascript"></script> <script src="js/sly.min.js" type="text/javascript"></script> <!-- Starting the plugin --> <script type="text/javascript"> $(document).ready(function() { /* var defaults = { containerID: 'toTop', // fading element id containerHoverID: 'toTopHover', // fading element hover id scrollSpeed: 1200, easingType: 'linear' }; */ $().UItoTop({ easingType: 'easeOutQuart' }); }); </script> </body> </html>