johannes999

July 30, 2023

Hello,

this is html code:

<div class="home-page-image-container">
  <img src="https://webdesignleren.com/wp-content/uploads/2023/07/auto-reparatie-in-hoogvliet.webp" alt="auto reparatie" />
  <div id="app"></div>
	  </div>

and this is JS code :

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<script>

var app = document.getElementById('app');

var typewriter = new Typewriter(app, {
    loop: true
});

typewriter.typeString('Home Developer')
    .pauseFor(2500)
    .deleteAll()
    .typeString('Web Designer')
    .pauseFor(2500)
    .deleteAll()
    .typeString('<strong>FrontEnd Developer</strong>')
    .pauseFor(2500)
    .start();





 
</script>

and this is CSS code:

#app{
  text-align:center;
  font-size:50px;
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-clip:border-box;
   text-fill-color: transparent;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  animation: textclip 2s linear infinite;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

it is on chrome and edge working very wel but only on firefox has deviation . I see firefox has some problems with gradient.the first 3-4 letters are not showing and it has strange behaviour. I tried in this way to solve the problem:

 #app {
      text-align: center;
      font-size: 50px;
      white-space: nowrap;
      overflow: hidden;
    }

    #app::before {
      content: attr(data-text);
      display: inline-block;
      width: 0;
      color: #231557;
      animation: typewriter 4s steps(40) infinite, colorTransition 4s infinite;
    }

    @keyframes typewriter {
      from {
        width: 0;
      }
    }

    @keyframes colorTransition {
      0% {
        color: #231557;
      }
      50% {
        color: #ff1361;
      }
      100% {
        color: #ff1361;
      }
    }
 <div id="app" data-text="Hello, Gradient!"></div>

but it didn't helpt . I tried many ways but the problem is the same . https://webdesignleren.com/onderhoud/can some one tell me how I can solve this problem with firefox .

thanks

johannes

February 6, 2023

hello,

this code for slidershow is from W3 schools;

<script>
let slideIndex = 0;
showSlides();

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>

it is working very well but when I open my websites home page there is no problem but when I open other pages and go to inspect element I see this error:

(index):1331 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
at showSlides ((index):1331:24)
at window.onload ((index):1317:1)

I searched in google for solution and found this option:

		window.onload = function() {
//code goes here
};

but it didn't help . I couldn't find any solution . it tells that .style.display = "block" is not defind . and problem with the line: showSlides() ;

this code is from W3schools where is the fault or how I can fix this problem?

thanks my url is: https://webdesignleren.com/onderhoud/

February 3, 2023

hello.

I get this syntaxError under console tab when I open inspect element on my homepage .

Uncaught SyntaxError: Unexpected token

I have deleted every unneccesary scripts but the problem exists.

I have only this 2 scripts.

the first is for FAQ . I don’t know if something wil be wrong here!

	<script> 
var acc = document.getElementsByClassName('accordion');
var len = acc.length;
for (var i = 0; i < len; i++) {
  acc[i].addEventListener('click', event => {
    const accordion = event.currentTarget;
    const currentlyActiveAccordion = document.querySelector('.accordion.active');
    if (currentlyActiveAccordion && currentlyActiveAccordion !== accordion) {
      currentlyActiveAccordion.classList.toggle('active');
      currentlyActiveAccordion.nextElementSibling.style.maxHeight = 0;
    }
    accordion.classList.toggle('active');
    var panel = accordion.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + 'px'
    }
  });>
}
	</script>

and second is for slider show :

<script>


    let slideIndex = 0;
      showSlides();

      function showSlides() {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");		  
       
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {
          slideIndex = 1;
        }
        for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
        setTimeout(showSlides, 4000); // 4000 = Change image every 4 seconds
      }


</script>

may be it can be in this slidershow script something wrong! but I don’t see myself anything.

can some one tell me what it can be this syntaxError?

thankshttps://webdesignleren.com/

January 12, 2023

Hello,

I have been for while looking for how to create slider show in JS and I found the code in w3school so I have studied and use it .

this is my JS code before I ask my question:

<script>
	
let slideIndex = 0;
      let timeoutId = null;
      const slides = document.getElementsByClassName("mySlides");
      const dots = document.getElementsByClassName("dot");  
	  
      showSlides();
      function currentSlide(index) {
           slideIndex = index;
           showSlides();
      }
     function plusSlides(step) {        
        if(step < 0) {
            slideIndex -= 2;            
            if(slideIndex < 0) {
              slideIndex = slides.length - 1;
            }        }
        
        showSlides();
     }
      function showSlides() {
        for(let i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
          dots[i].classList.remove('active');
        }
        slideIndex++;
        if(slideIndex > slides.length) {
          slideIndex = 1
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].classList.add('active');
         if(timeoutId) {
            clearTimeout(timeoutId);
         }
        timeoutId = setTimeout(showSlides, 5000); // Change image every 5 seconds
		  
		 
}	
    </script>

it is working OK when you look on my url.

1 problem exists I want to add on the top of the sliders in 3 column some small texts so I created 1 div with 3 classes it didn't work I had to use big minus numbers to bring those texts on the top of the sliders . I thought I create this div with 3 classes in the JS self and solve the problem. and I think it has to be I searched in google how to add id with 3 classes in javascript code . I found many and tried but it didn't work. I have found chat GPT through someone and tried it . it has created to me this JS code :

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  slides[slideIndex-1].id = "myId";
  slides[slideIndex-1].classList.add("class1", "class2", "class3");
}

this code didn't work because of this 2 lines:

  slides[slideIndex-1].id = "myId";
  slides[slideIndex-1].classList.add("class1", "class2", "class3");

to be sure I inserted this 2 line code in my own JS code above it didn't work either.

I am sure that it has to be to create ID with 3 classes in JS slider show code and style it in CSS.

I am asking this question for someone hoe knows very good or is expert in Javascript.

how I can solve this problem or how I can create ID with 3 classes in the code above (first JS CODE above) not the second which is created with chat GPT.

and where exactly insert it in the code above?

thanks

January 6, 2023

thanks,

I have changed animation duration from 1.5s to 4s and the problem is resolved.

 .fade {
        animation-name: fade;
        animation-duration: 4s;
      }

January 4, 2023

hello,

I have found this code from code pen for slider show and it is working perfect but when I paste this code in my wordpress I get this problem :

https://webdesignleren.com/

the JS code is :

<script>
	
  let slideIndex = 0;
      showSlides();

      function showSlides() {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {
          slideIndex = 1;
        }
        for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
        setTimeout(showSlides, 3000); // 3000 = Change image every 3 seconds
      }


</script>

HTML CODE is:

	  <div class="slideshow-container">
      <div class="mySlides fade">
        <div class="numbertext"></div>
        <img
          src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg"
          style="width: 100%"
          height="750px"
        />
        <div class="text">SLIDE 1/3</div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext"></div>
        <img      src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg"
          style="width: 100%"
          height="750px"
        />
        <div class="text">SLIDE 2/3</div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext"></div>
        <img  src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg"
          style="width: 100%"
          height="750px"
        />
        <div class="text">SLIDE 3/3</div>
      </div>
    </div>
	<br/>

    <div style="text-align: center">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>

CSS code is :

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}



      .mySlides {
        display: none;
      }

      img {
        vertical-align: middle;
      }

      /* Slideshow container */
      .slideshow-container {
        max-width: 100%;
        position: relative;
        margin: auto;
      }

      /* Caption text */
      .text {
        color: #f2f2f2;
        font-size: 60px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
      }

      /* Number text (1/3 etc) */
      .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
      }

      /* The dots/bullets/indicators */
      .dot {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
      }

      .active {
        background-color: #717171;
      }

      /* Fading animation */
      .fade {
        animation-name: fade;
        animation-duration: 1.5s;
      }

      @keyframes fade {
        from {
          opacity: 0.4;
        }
        to {
          opacity: 1;
        }
      }

I checked everything carefully few times but I couldn't find the bug.

why it is interrupting , what is the wrong here?

thanks

January 3, 2023

thanks ,

I understood that I am using swiper.js and all code is written in swiper.js and inserting of text has to be there.

I found onother slider code in youtube .

it is working very wel and I see I can insert text in the slider self as I wanted.

now I have a little problem . after sliders repeat from 1 to 3 it is turning back to 1 afterwards not forwards .

how I can solve this problem?

this is the JS code:

<script>

var counter= 1;
setInterval (function()  {
document.getElementById('radio' + counter).checked= true;
counter++;
 if(counter > 3)  {
counter= 1;		
} 
	
	
}, 3200 ) ;


</script>

and this is HTML code:

<div class="site-header">
	<div class="slider">
	<div class="slides">
		
	<!-- radio buttons-->
		<input type="radio" name="radio-btn" id="radio1">		
		<input type="radio" name="radio-btn" id="radio2">
		<input type="radio" name="radio-btn" id="radio3">
		<!--slide images-->
		<div class="slide first">	
			
			 <img class="img-fluid1" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg" alt="Responsive image">
			
		</div>
			<div class="slide">		
		<img class="img-fluid2" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg" alt="Responsive image">
		</div>
		
			<div class="slide">		
		<img class="img-fluid3" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg" alt="Responsive image">
		</div>
		
		<!-- automatic navigation -->
		<div class="navigation-auto">
			<div class="auto-btn1"> </div>	
			<div class="auto-btn2"> </div>	
			<div class="auto-btn3">  </div>				
			
		</div>
		
		</div>
		
		<!-- manual navigation -->
		<div class="navigation-manual">
		<label for="radio1" class="manual-btn"></label>
		<label for="radio2" class="manual-btn"></label>
		<label for="radio3" class="manual-btn"></label>	
			
		</div>
		
		
		
		</div>

and this is my url:https://webdesignleren.com/

thanks

December 30, 2022

I have found this code in google and inserted in swiper scrip

const element = document.querySelector("#info-container");

element.classList.add(".text1");
element.classList.add(".text2");
element.classList.add(".text3");

it didn't work then I tried this code:

<script>                                         

const swiper = new Swiper('.swiper', {
	autoplay: {		
		delay:3000,
		disableOnInteraction:false,	
	},
 
   loop: true,
  
  pagination: {
    el: '.swiper-pagination',
	 clickable:true,
  },
	
		const info-container = document.querySelectorAll('#info-container');

for (const info-container) {
  info-container.classList.add('.text1');
	info-container.classList.add('.text2');
	info-container.classList.add('.text3');
	
}
	
	

  // Navigation arrows
 /* navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },  */
/*const element = document.querySelector("#info-container");

element.classList.add(".text1");
element.classList.add(".text2");
element.classList.add(".text3"); */
 
});

</script>

it didn't work either .

I have in my header.php this code ;

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">
	<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/min.js/0.2.3/$.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>	
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<link   rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
	<?php wp_head(); ?>
</head>

I have also the html code in header.php like this:

<div class="site-header">
<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"> <img class="img-fluid1" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg" alt="Responsive image"></div>
    <div class="swiper-slide"> <img class="img-fluid2" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-1.jpg" alt="Responsive image"></div>
    <div class="swiper-slide"> <img class="img-fluid3" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg" alt="Responsive image"></div> </div> </div> </div>
   <div id="info-container">
<div class="text1">
			hello</div>
<div class="text2">
		hello hello hello hello</div>
<div class="text3">
		hello hello</div>
</div>

what it can be the problem or how I can solve it ?

do I have also embed index.js or the problem is in the code?

thanks

December 29, 2022

hello,

I have this code for my slider show

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>



<script>                                         

const swiper = new Swiper('.swiper', {
	autoplay: {		
		delay:3000,
		disableOnInteraction:false,	
	},
 
   loop: true,
  
  pagination: {
    el: '.swiper-pagination',
	 clickable:true,
  },

  // Navigation arrows
 /* navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },  */

 
});

</script>

now I want to create class with name (container) which wil have 3 classes inside it . class1 class2 class3 .

I want to use this classes inside slider on the top of the page with matgin-top = 10px.

the first class wil have (menu) name the second class wil have (BMW Specialist) text and the third class wil have (customer satisfaction) text.

I tried to do it in HTML but the problem is ?

I can't insert class from outside slider . so I thought that it has to be in slider self .

in javascript code of it.

can you give me an example how to do it to create class container with 3 classes inside it in Javascript code of slider?

do I have to begin with creating Cons + querySelectorAll. and add classLists

can you give me an simple example ?

I couldn't insert my url through link because of link text is not functioning . I tried to leave empty but it is not working.

my url is : https://webdesignleren.com/

thanks

November 26, 2022

Hello,

I have this php code for contact form which I had copied and sudied from w3school then I have incorporated in my website.

everything was working very wel .

but now after a while I see some error .

when I try to fill the contact form fields with name email etc. and I let 1 field expressly empty and click on submit botton the email is sent.

and I don't get the error for example name is requierd, email is required , etc.

what it can be the problem?

thanks

johannes

<?php

/*
* Template Name: Contact
* Description: Template voor contactpagina
* Template Post Type: page
*/
get_header('new4');
the_content();
// define variables and set to empty values
$nameErr = $emailErr = $phoneErr = $contentErr = "";
$name_sender = $email_sender= $phone = $content =$success= "";

  if ($_SERVER["REQUEST_METHOD"] == "POST") {

	
  

	// post
	$name_sender = strip_tags($_POST['name_sender']);
	$email_sender = strip_tags($_POST['email_sender']);
	$phone = strip_tags($_POST['phone']);
	$content = strip_tags($_POST['content']);
		
	// validate name
	 if (empty($_POST["name_sender"])) {
    $nameErr = "Name is required";
  } else {
    $name_sender = test_input($_POST["name_sender"]);
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z-' ]*$/",$name_sender)) {
      $nameErr = "Only letters and white space allowed";
    }
	 }
	
	
 
	
	
	if (empty($_POST["email_sender"])) {
    $emailErr = "Email is required";
  } else {
    $email_sender = test_input($_POST["email_sender"]);
    // check if e-mail address is well-formed
    if (!filter_var($email_sender, FILTER_VALIDATE_EMAIL)) {
      $emailErr = "Invalid email format";
    }
  }

	
	

	// validate phone
	if (empty($_POST["phone"])) {
		$phoneErr = "Phone is required";
	} else {
		 $phone = test_input($_POST["phone"]);
		// check if phone is well-formed
		if(!preg_match("/^[0-9\s\-]+$/", $phone)) {
			$phoneErr = "Invalid phone number";
		}
	}


	// validate content
	if (empty($_POST["content"] )) {
		$contentErr = "Content is required";
	} else {
    $content = test_input($_POST["content"]);
  }

	// send
		if ( empty($nameErr) && empty($emailErr) && empty($phoneErr) && empty($contentErr) ) {
		// Variables
		$to = 'johannes@webdesignleren.com';
		$subject = 'Contact form';
			
			echo '<script type="text/javascript">window.location.href="https://webdesignleren.com/bedankt/"</script>';

			
    



		// Message content		
		 $content .= ''; 	

		// Headers
		$headers	 = 'From: ' .$name_sender. ' <' .$email_sender. '>' . PHP_EOL;
		$headers	.= 'Reply-To: <' .$email_sender. '>' . PHP_EOL;
		$headers	.= 'Content-Transfer-Encoding: 8bit' . PHP_EOL;
		$headers	.= 'Content-Type: text/plain; charset=UTF-8' . PHP_EOL;

		// Send email
		mail($to, $subject,$content, $headers); 
		
		
		
    
	
}
	  
	 

	  
  }




function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
	


// form


?>
<div class="container-form">
<form id="contact" action= "https://webdesignleren.com/bedankt/"  autocomplete="off"  method="post" action=""> 
<h3>Quick Contact</h3>
<h4>Contact us today, and get reply with in 24 hours!</h4>
<fieldset>
<input placeholder="Your name" type="text" name="name_sender" id="name_sender" value="<?php echo $name_sender;?>">

<span class="error">* <?php echo $nameErr; ?></span>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="text" name="email_sender" id="email_sender" value="<?php echo $email_sender;?>">
 
<span class="error">* <?php echo $emailErr; ?></span>
</fieldset>
<fieldset>
<input placeholder="Your phone number" type="text" name="phone" id="phone" value="<?php echo $phone;?>">

<span class="error">* <?php echo $phoneErr; ?></span>
</fieldset>
<fieldset>
<textarea placeholder="Type your message here.." type="text" name="content"  id="content"><?php echo $content;?></textarea>
<span class="error">* <?php echo $contentErr; ?></span>
</fieldset>
<fieldset>

	<button name="submit" type="submit" id="btnsubmit" class="submit">Submit</button></fieldset>
	
</form></div>

https://webdesignleren.com/contact/

August 24, 2022

thank you very much,

I saw that the class has to be inside the site-header like this in my case :

<div class="site-header">        <!-- site-header --> 
	
			<div class="site-title ">		  
	X Auto Service</div> 
     


	  <div class="header-menu">					
			<ul>				
				<li><a href="http://webdesignleren.com/" > Home </a> </li>
				<li><a href="http://webdesignleren.com/onderhoud/" > Onderhoud </a> </li>
				<li><a href="http://webdesignleren.com/banden/" > Banden </a> </li>
				<li><a href="http://webdesignleren.com/apk/" > APK </a> </li>
				<li><a href="http://webdesignleren.com/contact/" > Contact </a> </li>	
						
				
		  </ul>  </div> 
		 
			
		
		
		<message>
	<h1>  <span>FULL</span>   <span>SERVICE</span>   <span>OF</span>  <span>AUTO</span>   <span>REPAIR</span>
  <span>And</span>  <span>Maintenance</span>  <span>PROFESSIONAL</span> <span>HELP</span>   <span>AND</span>
  <span>DURABLE</span>  <span>REPAIR</span>  <span>SERVICE</span>  <span>place</span>  <span>on</span>   <span>your</span>   <span>own</span>   <span>thinking.</span>
</h1>
	
			</message>     		
		
		<div class="box">   <div class="box-item1"> hello 	</div>  
			<div class="box-item2">  hello   </div>     <div class="box-item3">  hello   </div>  
		</div>                              
	
	</div>

and the CSS:

.box {
display:flex;
width:92%;
float:left;	
margin-left:4%;
border:0.1 solid;
box-shadow: 0px 0px 2px 2px #C8C8C8;  
box-sizing:inherit;
	/*-moz-box-sizing: border-box; 	*/
background-color:red; 

height:200px;
margin-top:26rem;	
}
.box-item1{

color:black
	
}

.box-item2{
justify-content:center;
color:black	
}

.box-item3{
	color:black;
	justify-content:flex-end;
	
	
}

you can see on :https://webdesignleren.com/

it is succeded . it can not be outside the div class of the site-header also flex is causing problem . I used percentages.

thank you for usefull information

August 22, 2022

Hello,
I want to insert a border or box with width 92% and height 220px on the bottom of my website home image . the border has to be 50% inside the image and 50% ouside the image.I want to insert text in this white background border.
I treid everything I made border in photoshop with background white with 0.1px solid black line . but it is not working . inside the image the section that has to be white it is standing in its origin color.
I searched in google and in youtube but I couldn’t find any solution or answer.
can some one tell me how I can solve this problem.
I saw some websites using even 4 boxes with width of 20% and height of 500px with white background and inserting some text in it.
please see my website:https://webdesignleren.com/ to understand what I mean.
thanks

August 19, 2022

thanks ,

I looked 10 times in JS for typo fault but I never thought it was in HTML.

It didn't help . I found much shorter and beter code for splitText on :https://greensock.com/splittext/

I craeted css animation it works fine but I wil try to study more to get beter results.

thanks again

August 18, 2022

sorry I forgot to insert my url :https://webdesignleren.com/

thanks

August 18, 2022

Hello,

I have created this JS script code to let each of letter of text to animate .

I have first created this HTML CODE:

<h1 class="message-texst">welkom to our website</h1>

This is CSS Code:

 h1{	
color:black;
font-size:2rem;
text-align:center;
line-height:50vh;	
}
	
span {	
	opacity:0;
	transition:all 1s ease;
	
}

span.fade {	
opacity:1;	
	
}

and this is JS CODE:

<script>	
const text=document.querySelector(".message-text");
const strText=text.textContent;
const splitText=strText.split("");
text.textContent= "";
for(let i=0; i < splitText.length; i++)  {
	
	text.innerHTML += "<span>" + splitText[i] + "</span>";
	}

	let char= 0;
	let timer=setInterval(onTick, 50);
	function onTick() {
	const span=text.querySelectorAll("span")[char];
		span.classList.add("fade");
		char++;
		if(char === splitText.length) {
		complete();
			return;		}		
	}

 function complete() {	 
	clearInterval(timer);
	 timer=null;
	 
 }  

</script>

I don't see any clue ! can some one tell me what is the wrong?

the span and fade class are generated in JS code.

thank you very much

August 18, 2022

thanks ,

I didn't get any message on my email box tath my thread is been answered . I have just log in today to ask question and I saw your reply.

thank you very much I have resolved the problem with redirecting to thank you page .

I created first thank you page then I used this code:

echo '<script type="text/javascript">window.location.href="https://webdesignleren.com/dank-u-wel/"</script>';

then I updated the form action class with my thanks page url:

<div class="container-form">
<form id="contact" action= "https://webdesignleren.com/dank-u-wel/"  autocomplete="off"  method="post">

thanks

August 10, 2022

I have build contact-form with p

<div class="container-form">

<form id="contact" autocomplete="off"  method="post" action="">

<h3>Quick Contact</h3>

<h4>Contact us today, and get reply with in 24 hours!</h4>

<fieldset>

<input placeholder="Your name" type="text" name="name_sender" id="name_sender" value="<?php echo $name_sender;?>">

<span class="error">* <?php echo $nameErr; ?></span>

</fieldset>

<fieldset>

<input placeholder="Your Email Address" type="text" name="email_sender" id="email_sender" value="<?php echo $email_sender;?>">

<span class="error">* <?php echo $emailErr; ?></span>

</fieldset>

<fieldset>

<input placeholder="Your phone number" type="text" name="phone" id="phone" value="<?php echo $phone;?>">

<span class="error">* <?php echo $phoneErr; ?></span>

</fieldset>

<fieldset>

<textarea placeholder="Type your message here.." type="text" name="content"><?php echo $content;?></textarea>

<span class="error">* <?php echo $contentErr; ?></span>

</fieldset>

<fieldset>

<button name="submit" type="submit" id="submit" class="submit">Submit</button></fieldset>

</form></div>

hp evrything is OK.

there is only 1 problem .

when I submit and send email the email been send but the informations remains in the field . I want to clean after submitting all the fields after 10 seconds with Jquery.

this is my HTML code :

this is my JS code:

<script>

$(document).ready(function () {

$("#submit").click(function(){

  setTimeout(function () {

      $('#submit').hide();

  }, 10000);

}

});

</script>

when you go to my website : https://webdesignleren.com/contact/

you can see when you input your records in the field after submitting all the information stays there and it is not cleand .

I know the reason because I put echo class in contact form for if some one forgets something then he has not to fill again all records .

I want to know how with set timeout I can clean all this fields with Jquery?

thanks

Sign In

johannes999

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by johannes999

the typewriter animation has deviation only on firefox?the first 3-4 letters is not showing!

how I can solve this problem (uncaught TypeError: cannot read properties of undifined (readingstyle) with slidershow from W3schools ?

when I open inspect element I see this syntaxError under console tab in chrome and firefox?

I want to creat 1 ID with 3 classes inside JS code (of slider show) and style it in CSS?

slider show interrupting with blank page when it is fading ?

slider show interrupting with blank page when it is fading ?

how I can add class (container) with 3 classes inside it in javascript in swiper script code below ?

how I can add class (container) with 3 classes inside it in javascript in swiper script code below ?

how I can add class (container) with 3 classes inside it in javascript in swiper script code below ?

in contact form the empty fields (for example name) is required is not functioning ?

how I can insert a border with background white 50% inside an image and 50% outside an image?

how I can insert a border with background white 50% inside an image and 50% outside an image?

I created this text animation code with JS but it is not working for some reason I study every aspect of it like typo fault but I don't see any clue?

I created this text animation code with JS but it is not working for some reason I study every aspect of it like typo fault but I don't see any clue?

I created this text animation code with JS but it is not working for some reason I study every aspect of it like typo fault but I don't see any clue?

how I can clean input fileds of contact form after filling and clicking submit button with set timeout in jquery?

how I can clean input fileds of contact form after filling and clicking submit button with set timeout in jquery?

Browse

Activity