Add current date using javascript
<span id="current_date"></span>const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const d = new Date();
let name = month[d.getMonth()];
year = d.getFullYear();
mnth = d.getMonth() + 1;
day = d.getDate() + 3;
document.getElementById("current_date").innerHTML = name + ", " + day + " " + year;Show different style of div for mobile and desktop using css
Certainly! Here's an example of how you can apply different styles to a <div> for mobile and desktop devices using CSS:
/* Styles for mobile devices */
@media (max-width: 767px) {
.my-div {
background-color: lightblue;
color: white;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
.my-div {
background-color: lightgreen;
color: black;
}
}In the example above, we use media queries to target different screen widths. The first media query targets devices with a maximum width of 767px, representing mobile devices. Within this media query, the .my-div class is styled with a light blue background color, white text color, a font size of 16 pixels, and a padding of 20 pixels.
The second media query targets devices with a minimum width of 768px, representing desktop devices. Within this media query, the .my-div class is styled with a light green background color, black text color, a font size of 20 pixels, and a padding of 30 pixels.
By applying different styles within each media query, you can create distinct visual presentations for mobile and desktop versions of the <div>. Feel free to adjust the styles and properties according to your specific design needs.
Send email using php
HTML Code:
<form action="contactform.php" name="contactForm" method="post" id="contactForm">
<div class="row form-group">
<div class="col-md-6">
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" class="form-control" placeholder="Your firstname" required />
</div>
<div class="col-md-6">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" class="form-control" placeholder="Your lastname" required />
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label for="email">Email</label>
<input type="text" id="email" name="email" class="form-control" placeholder="Your email address" required />
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" class="form-control" placeholder="Your subject of this message" required />
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10" class="form-control" placeholder="Say something about your project" required /></textarea>
</div>
</div>
<div class="form-group">
<input type="submit" value="Send Message" class="btn btn-primary">
</div>
</form>PHP Code:
<?php
ini_set("display_errors", 1);
error_reporting(E_ALL);
ini_set("SMTP", "smtp.secureserver.net");
ini_set("smtp_port", 25);
?>
<?php
$to = "demo@demo.com";
$firstname = $_POST["fname"];
$lastname = $_POST["lname"];
$email = $_POST["email"];
$subjects = $_POST["subject"];
$message = $_POST["message"];
$subject = "Inquiry Received";
if ($email != "") {
function get_client_ip()
{
$ipaddress = "";
if (getenv("HTTP_CLIENT_IP")) {
$ipaddress = getenv("HTTP_CLIENT_IP");
} elseif (getenv("HTTP_X_FORWARDED_FOR")) {
$ipaddress = getenv("HTTP_X_FORWARDED_FOR");
} elseif (getenv("HTTP_X_FORWARDED")) {
$ipaddress = getenv("HTTP_X_FORWARDED");
} elseif (getenv("HTTP_FORWARDED_FOR")) {
$ipaddress = getenv("HTTP_FORWARDED_FOR");
} elseif (getenv("HTTP_FORWARDED")) {
$ipaddress = getenv("HTTP_FORWARDED");
} elseif (getenv("REMOTE_ADDR")) {
$ipaddress = getenv("REMOTE_ADDR");
} else {
$ipaddress = "UNKNOWN";
}
return $ipaddress;
}
$IPAddress = get_client_ip();
$header = "From: $email \r\n";
$header .= "MIME-Version: 1.0\r\n";
$header .= "Content-type: text/html\r\n";
$header .= "X-Mailer: PHP \r\n";
$message = "<table width='900' style='border:1px solid #798eea;' cellpadding='5' cellspacing='0' align='center'><tr><td width='150' style='margin:0; padding:0 0 0 10px; background-color:#798eea; color:#FFFFFF;'>First Name</td><td width='8' style='margin:0; padding:0 0 0 10px; background-color:#798eea; color:#FFFFFF;'>:</td><td style='padding-left:15px; margin:0; color:#000000; border-bottom:1px solid #798eea'>$firstname</td></tr><tr><td width='150' style='margin:0; padding:0 0 0 10px; background-color:#798eea; color:#FFFFFF;'>Last Name</td><td width='8' style='margin:0; padding:0 0 0 10px; background-color:#798eea; color:#FFFFFF;'>:</td><td style='padding-left:15px; margin:0; color:#000000; border-bottom:1px solid #798eea'>$lastname</td></tr><tr><td width='150' style='margin:0; padding:0 0 0 10px; background-color:#798eea; color:#FFFFFF;'>Email</td><td width='8' style='margin:0; padding:0 0 0 10px; background-color:#798eea; color:#FFFFFF;'>:</td><td style='padding-left:15px; margin:0; color:#000000; border-bottom:1px solid #798eea'>$email</td></tr><tr><td width='150' style='margin:0; padding:0 0 0 10px; background-color:#798eea; color:#FFFFFF;'>Subject</td><td width='8' style='margin:0; padding:0 0 0 10px; background-color:#798eea; color:#FFFFFF;'>:</td><td style='padding-left:15px; margin:0; color:#000000; border-bottom:1px solid #798eea'>$subjects</td></tr><tr><td width='150' style='margin:0; padding:0 0 0 10px; background-color:#798eea; color:#FFFFFF;'>Message</td><td width='8' style='margin:0; padding:0 0 0 10px; background-color:#798eea; color:#FFFFFF;'>:</td><td style='padding-left:15px; margin:0; color:#000000; border-bottom:1px solid #798eea'>$message</td></tr></table>";
if (mail($to, $subject, $message, $header)) {
echo "<script>alert('Thank you for Applying. We will contact you as a possible');window.location = '/';</script>";
}
} else {
header("Location: http://{$_SERVER["SERVER_NAME"]}/");
die();
}
?>The mail() function is a built-in PHP function for sending email. It requires a working email server configuration on your server to send the email successfully. Note that the mail() function may not work properly on all systems or configurations.
Which is best option for responsive website? Custom css media query or framework?
The choice between using custom CSS media queries or a framework for building a responsive website depends on various factors, including your project requirements, development expertise, and personal preference. Both options have their advantages and considerations:
Custom CSS Media Queries:
Frameworks:
Ultimately, the best option depends on your specific project requirements, your familiarity with CSS, and your development approach. If you prefer maximum control and have the necessary expertise, custom CSS media queries can offer a tailored solution. On the other hand, if you prioritize efficiency, consistent design, and a faster development process, using a framework may be a suitable choice.
On click menu scroll down page to specific div using jquery
To scroll down the page to a specific <div> element when a menu item is clicked using jQuery, you can use the .click() event handler along with the .animate() method. Here's an example:
HTML:
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
<div id="section1">
<!-- Content of section 1 -->
</div>
<div id="section2">
<!-- Content of section 2 -->
</div>
<div id="section3">
<!-- Content of section 3 -->
</div>JavaScript (jQuery):
$(document).ready(function() {
// Function to handle menu item click event
$('nav ul li a').click(function(e) {
e.preventDefault(); // Prevent the default link behavior
var target = $(this).attr('href'); // Get the target element ID
var offset = $(target).offset().top; // Get the target element's offset from the top
// Scroll smoothly to the target element
$('html, body').animate({
scrollTop: offset
}, 1000); // Adjust the duration as needed
});
});In the above code, we first define the click event handler for the menu items using $('nav ul li a').click(). Inside this handler, we prevent the default link behavior by calling e.preventDefault(), which prevents the browser from following the link.
Next, we get the href attribute of the clicked menu item using $(this).attr('href'). This will give us the ID of the target <div> element to scroll to.
We then calculate the offset of the target element from the top of the page using $(target).offset().top.
Finally, we use the .animate() method to smoothly scroll the page to the target element. We animate the scrollTop property of the html and body elements to the calculated offset. You can adjust the duration of the animation (in milliseconds) as needed.
By implementing this code, when a menu item is clicked, the page will scroll down smoothly to the corresponding <div> element specified in the menu item's href attribute.
Show div in desktop and hide in mobile using jquery.
To show a <div> element on desktop and hide it on mobile using jQuery, you can use the $(window).resize() event handler along with the .hide() and .show() methods. Here's an example:
HTML:
<div id="myDiv">
This div will be shown on desktop and hidden on mobile.
</div>JavaScript (jQuery):
$(document).ready(function() {
// Function to handle the window resize event
function handleResize() {
if ($(window).width() < 768) { // Adjust the breakpoint as needed
$('#myDiv').hide(); // Hide the div on mobile
} else {
$('#myDiv').show(); // Show the div on desktop
}
}
// Initial handling of the window resize event
handleResize();
// Bind the window resize event to the handling function
$(window).resize(function() {
handleResize();
});
});In the above code, we first define the handleResize() function to handle the window resize event. Inside this function, we check the width of the window using $(window).width() and compare it to a specified breakpoint (in this case, 768 pixels). If the window width is less than the breakpoint, we use the .hide() method to hide the <div>. Otherwise, we use the .show() method to show the <div>.
Next, we call the handleResize() function initially to handle the window resize event when the page loads. Then, we bind the resize() event to the handleResize() function so that it is called whenever the window is resized.
This way, the <div> will be shown on desktop and hidden on mobile, and the visibility will be automatically updated when the window is resized.
How to make div center using css?
To center a <div> element horizontally and vertically using CSS, you can use the following techniques:
1- Using Flexbox:
.container {
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
}2- Using Grid:
.container {
display: grid;
place-items: center; /* Center both horizontally and vertically */
}3- Using Absolute Positioning:
.container {
position: relative;
}
.centered-div {
position: absolute;
top: 50%; /* Move to the middle vertically */
left: 50%; /* Move to the middle horizontally */
transform: translate(-50%, -50%); /* Adjust position to center */
}4- Using Text-Align:
.container {
text-align: center;
}
.centered-div {
display: inline-block;
/* Additional styles for the div if needed */
}These methods can be applied to a container element (such as a <div> or any other block-level element) that wraps the content you want to center. By applying the appropriate CSS rules to the container, you can achieve both horizontal and vertical centering. Feel free to choose the technique that best suits your needs and the overall structure of your HTML.
Show div one by one on click button using jquery
$(document).ready(function(){
var limit = 1;
$("div").slice(0, limit).show();
$("button").on("click", (function(e) {
limit += 1;
e.preventDefault();
$("div").slice(0, limit).css('display', 'flex');
}));
});Hide show div with class based on data attribute using jquery
Links
<ul>
<li><a data-ctg="ctg1" href="#">Category 1</a></li>
<li><a data-ctg="ctg2" href="#">Category 2</a></li>
</ul>
Article
<div>
<article class="ctg1">Category 1</article>
<article class="ctg2">Category 2</article>
</div>$(document).ready(function(){
$('ul li a').click(function(event){
let docId = $(this).attr("data-ctg");
$('ul li a').parent().removeClass("active");
$(this).parent().addClass("active");
$('div article').hide();
$(`div article.${docId}`).show();
event.preventDefault();
});
});