I am trying to emulate a sidebar similar to the one on this website
By clicking the email icon, it creates the desired effect that I am aiming for. However, my limited knowledge of jquery is hindering my progress.
I am hopeful that someone can assist me in achieving my goal.
Thank you in advance for any help provided.
If you have a div that appears on click with a width of 300px, your CSS for the div must include at least two properties.
.box {
position: absolute;
top: 10%; // Adjust as needed
width: 300px;
left: -300px; // Adjust based on design
}
When clicking on an icon with the id "logo"
$(document).ready(function () {
$("#logo").click(function () {
var left = parseInt($(".box").css('left')) < 0 ? 0 : '-300px';
$(".box").animate({left: left}, 1000);
});
});
This should be a helpful guide.
Thank you
Check out the jsfiddle right here
I implemented a toggle effect on the box width using .animate()
Here's the HTML code:
<div id="box">
<div id="opener">Opener</div>
<div id="message">This is the message</div>
</div>
For the CSS:
#box {
position:fixed;
top: 20px;
left: 0;
width: 200px;
height: 400px;
}
#opener {
position: relative;
float: right;
right: 0;
top: 0;
width: 40px;
height: 40px;
background: #000;
overflow: hidden;
}
#message {
float: left;
overflow: hidden;
background: #f00;
width: 160px;
}
And for the jQuery part:
$(document).ready(function () {
$("#box").css("width", "40px");
$("#message").css("width", "0px");
var show = 0;
$("#opener").click(function () {
if (show === 0) {
$("#box").animate({
width: '200px'
});
$("#message").animate({
width: '160px'
});
show = 1;
} else {
$("#box").animate({
width: '40px'
});
$("#message").animate({
width: '0px'
});
show = 0;
}
});
});
You can easily make the jQuery more versatile by avoiding hard coded values.
On a completely random English-Wikipedia editing page, there exists a way to add content (for example, "test") and save it using the existing key combination of Alt+Shift+S. My goal is to specifically prevent this action without removing the save button b ...
I am in the process of upgrading my company's AngularJS project to Angular 8 using ngUpgrade. This has resulted in a hybrid application with components from both AngularJS and Angular. Additionally, I am utilizing an angular material template that inc ...
In the structure of my HTML, I have the following simplified layout: <table> <tr> <td> <div class="PromptContainer"> <span class="Prompt">Prompt text</span> </div> <input type="t ...
What I'm Looking for: I am looking to display all comments related to a specific post directly under that post. This can be achieved by using a loop to showcase all the CommentTexts in a list. For instance, if there are 3 comments with PostNr = ...
Which method is most recommended for implementing AJAX? If you were developing a search page using PHP and Jquery for the AJAX calls, how would you manage the response? a) Would you prefer to have the response include all relevant HTML and styling? or ...
(I apologize for not discovering this earlier, but it seems that Chrome-Android also does not support the font I intended to use. The fallback-to-sys-default-font-trick used by Chrome-Android did fool me.) I had planned to incorporate unicode-range to add ...
I am currently working with the Bootstrap 4 grid system, and I have a specific layout in mind. I want to position an aside element along the right side of the screen. At the moment, my main content is enclosed in a col-xl-3 column. I would like the aside ...
Trying to achieve a layout in Firefox where everything is displayed in one single horizontal row. This includes the label Dropdown, dropdown box itself, bootstrap nav-pills menu, and separate link. Code snippet: (jsfiddle: https://jsfiddle.net/aq9Laaew/16 ...
On my webpage, I have included a YouTube video: <div class="col-md-8"> <iframe id="theframe" width="400" height="325" src="http://www.youtube.com/embed/MYYOUTUBECLIP" frameborder="0" allowfullscreen class=""></iframe> While this works p ...
I'm currently working on a css parallax website. Everything looks great on desktop, but when viewed on mobile devices, I encounter a horizontal scrollbar issue due to the transform3d scale (even with overflow-x:hidden applied to the parallax class). I ...
On one specific page of my angular app, I have an input field for a name that is showing credit card suggestions. When I disable the autofill for credit cards in Chrome settings, it then shows suggestions for names instead. However, on another page with ...
I'm using a template with the following preview link: The template includes an image of a laptop on the left side, with clickable points representing links. My goal is to make these points clickable so that they open specific pages like mbank.pl or ...
I am looking to enhance the user experience of my form by preventing it from reloading upon submission. Specifically, I want to trigger the call to index.php when the submit button named "delete-image" is clicked in the scenario outlined below. It's i ...
How can the widths/heights of child elements with translateZ be calculated within a parent container that has a specified perspective value (keyword: "parallax") in relation to its parents width/height? I am working on a website design that incorporates a ...
I have a basic form with some fields that are affected by the click event. In addition to this, I am duplicating the form and appending it (with the intention of renaming the fields, but I have not succeeded yet). The problem I am facing is that after cl ...
I am working with HTML code. <body> <span> <font="color"> adfadf 23423423423 ORDER_NUMBER: </font> </span> <span>M123456JK98766</span> </body> The s ...
I am currently in the process of creating a directory website. To build it, I chose the Jekyll Moonwalk theme as a solid foundation and am customizing it heavily to suit my requirements. Since this is my inaugural website project, I'm learning as I p ...
While I typically work as a RoR developer, in school we use ASP.NET. For a recent ASP.NET MVC 5 project, I needed to retrieve data from a WCF service. Here's an example of the controller I created: [HttpGet] public ActionResult GetMovies() { retu ...
I'm currently facing an issue while working with Data-tables. I am trying to pass a value from Ajax to a PHP file. The Ajax section of my code looks like this: <script> $(document).ready(function() { var oTable = $(&ap ...
extracting json information using jQuery $("#btn-id").click(function() { $.getJson(g, function(jd) { $("#data-id").html(jd.id + "--" + jd.email); }); }); ...