I've created some basic panels that slide in and out horizontally. My goal is to hide all content except the first panel when the page loads. When a link to other panels is clicked, the current content will slide left to be hidden and new content will slide into the center of the page. However, I'm having trouble with the positioning of the boxes I have.
Check out the demo here:
Thank you!
Is it truly necessary to use margin for positioning elements to the left? If hiding them works just as well for your needs, you can achieve the desired effect with the following simple code:
$(document).ready(function() {
$('#container').css({position:'relative'});
$("#container div:not(:first)").hide();
$('.div1').addClass('current');
$("nav a").click(function() {
var cls = this.name;
$('.current').removeClass('current').animate( { width: "hide", paddingLeft: "hide", paddingRight: "hide", marginLeft: "hide", marginRight: "hide" }, 500, function() {
$('.'+cls).addClass('current').animate( { width: "show", paddingLeft: "show", paddingRight: "show", marginLeft: "show", marginRight: "show" }, 500);
});
return false;
});
});
You can also access this version on your Fiddle link: http://jsfiddle.net/fE8ks/1/
It appears that everything is functioning correctly in Firefox, but the z-index attribute needs to be applied to the .current class to ensure that the selected slide column is displayed on top. If there are any additional issues, please provide a screenshot or specify the browser version in which you are encountering the problem so we can investigate further.
I have been attempting to center crop the responsive SVG image while resizing. Even though I used preserveAspectRatio="xMidYMax slice", the image width does not stay consistent with my screen size. body{ margin:0;padding:0; } .wrapper { position: re ...
I am having trouble centering a div in my footer. When I try to center it, the div ends up floating on top of the footer instead. Here is the link to the codepen. footer { text-align: center; background-color: grey; position: fixed; bottom: 0; width: 100 ...
New to the world of HTML and CSS, I'm trying to replicate a design I came across online for some practice. The website layout includes images separated by borders, and I'm unsure if this particular design can be achieved using regular CSS alone o ...
My attempts to send form data using jQuery seem to be failing as the data is not reaching the server. Can you please help me identify what mistake I might be making? This is my HTML form: <form id="contactForm" name="contactForm" method="post"> ...
My SVG text suddenly has a strange drop shadow that I can't seem to get rid of. Despite checking the reference guide I purchased on Amazon, I still haven't found any solutions. There are no filters applied and the markup seems to align with examp ...
Suppose I have a variable called data in the app.component.ts file of type :string. In the app.component.html file, I am displaying the value of data on the UI using string interpolation like {{data}}. My question is, how can I apply some css to specific ...
I have a scenario with two tables. My goal is to compare the content of two tables. If the td elements in both tables have the same class (e.g. id-1 == id-1), I want to copy and replace the content from the first table into the second table at the corresp ...
I'm working on creating a dynamic search feature. As the user types in the search box, JavaScript is triggered to hide the blog posts (#home) and display search results instead (the specific script for this is not shown below). However, when the user ...
Recently, I decided to give require.js a try for the first time, but unfortunately, I encountered an error that left me puzzled: Uncaught TypeError: Property '$' of object # is not a function. require.config({ shim: { "jquery" ...
Is it possible to dynamically set a scale and margin for an element in order to center it fluidly using the wheel event? I am aiming to achieve a smooth transition while also adjusting scroll position on the wrapping element in a fluid manner. In the prov ...
My ajax request implementation looks like this: function apiCall(resource, data, callback) { if(data == undefined || data == null) data = {}; $.ajax({ dataType: 'jsonp', data: data, url: nodeUri + "/" + resource }). ...
My preference is to create drill down buttons rather than focusing on output. Currently, the output appears as: https://i.sstatic.net/8qs5F.png The content of index.html is as follows: <html> <head> <script type="text/javascript" ...
Currently, I am working on developing a component that creates an animation loop with a duration that is passed as a prop to the component. The issue I am facing involves using CSS to create the animation: animate:{ -webkit-transition: 10.0s !important ...
Is there a way to show the source code of an element on a webpage in a text box when that specific element is clicked? I am wondering if it is feasible to retrieve the source code of an element upon clicking (utilizing the onClick property), and subseque ...
How can the URL of a jQuery request be retrieved from the response received? Perhaps something like this: function retrieveUrlFromResponse(response, url){ requestUrl = url; } ...
I am facing an issue with my HTML & CSS automatic horizontal slideshow. Everything works fine, except for when the last image finishes sliding and the slideshow loops back to the first image, there is a sudden jump in the appearance of the first image. How ...
I have the following unique jQuery function that will loop through all the elements of my ASP.NET ListBox. It is triggered when clicked: $('#<%=MyListBox.ClientID %>').children("option").each(function () { } The functionality of this fun ...
While searching for an answer to my question, I noticed that similar questions have been asked before but none provided the solution I need. My situation involves a basic form with a submit button. <form id="myForm" class="vertically-centered"> ...
Hey there, I have a question that may sound basic to some, but I need help with echoing this piece of code: echo 'jQuery(document.body).prepend("<div id="notice" class="alert alert-success">Advanced Custom Fields plugin is currently active. & ...
An AngularJS application has been developed to dynamically display specific values in an HTML table. The table consists of six columns, where three (Work Name, Team Name, Place Name) are fixed statically, and the remaining three columns (Service One, Servi ...