The script is running smoothly. Check out the jsFiddle here
The issue lies in its width adjustment when sliding (clicking "here"). It seems to be cutting off the width related to a 100px margin-left in #slider.
Why does it seem to "jump" and how can this be resolved? Is there an error within the code?
This code contains a slider within a centered div with content and a sticky footer.
There seems to be an issue with the negative margin on #slider causing it not to display correctly during animation.
If you're facing this problem, check out this solution: http://jsfiddle.net/vyWTL/8/
This approach maintains a constant margin-left of 0px and uses jQuery to determine the appropriate value for left based on the container's width. As the width can be dynamic and change when the viewport is resized, a function is created to handle this calculation on page load and window resize events.
Not quite sure if this meets your requirements, but you can easily configure it as follows:
CSS
...
.slider{
...
bottom:0px;
...
}
Then, simply utilize jQuery .slideToggle() for smoother handling of open/closed states:
JS
$("#slide-link").click(function (){
$('#slider').slideToggle();
});
Check out a sample jsFiddle here
EDIT 1
Updated to toggle #slide-link along with #slider.
In essence, we animate it based on the visibility of #slider:
if(!$('#slider').is(':hidden')){
$(this).animate({
top: $('#global-container').height()-23
},500)
}else{
$(this).animate({
top: '0px'
},500)
}
EDIT 2
Here's another slightly hackier way to avoid dealing with the hidden state check each time, reducing redundancy in the .animate function:
Since $('#slider').is(':hidden') is a boolean that translates to 0 or 1, you can simplify it as:
var hid = $('#slider').is(':hidden')
$(this).animate({
top: (1-hid)*(contHeight)
},500)
Where contHeight represents the difference between #global-container height and #slide-link height.
EDIT 3 Scroll Issue
If I understand your issue correctly, when the content section is filled with a lot of text, it doesn't scroll properly within #slider and extends beyond the page without scrolling capability.
This occurs because .content lacks a fixed height, given our knowledge that the footer is 70px high, and we want .content to occupy the remaining space inside #slider without a predefined height value in its CSS. To address this dynamically in JS:
$('.content').height(contHeight-70)
You can now add:
overflow:hidden; //to prevent horizontal scroll
overflow-y:scroll; //for vertical scroll
I hope this helps clarify things.
.custom-effects-wrapper{ overflow-x: visible !important; width: 100% !important; }
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 ...
Having trouble with two divs on my page: a main div and a secondary div that loads separate HTML content using Ajax. The links within the main div work fine, but jQuery outside of this section is not functioning (like the navigation). Check out my jQuery ...
Looking for the optimal method to place a div in various locations on a webpage while anchoring it from the bottom left. The div should be able to be attached to any element on the page for relative positioning, specifically intended for a tooltip. Each ...
My mobile app, created using PhoneGap, allows users to select an image from their album. I want to pass that selected image and display it on another HTML page. Does anyone have any suggestions on how to achieve this? Below is the code snippet: selectImag ...
After referencing the Markdown Syntax guide on Telegram’s Wiki page, it appears to be quite straightforward to format text as bold and italic. The guide explains that: *this is in italic* and _so is this_ **this is in bold** and __so is this__ ***this ...
While utilizing a Map to populate the Struts2 tag <s:select >, I have noticed that when the form is submitted multiple times, a blank line is added at the end of the list. For example, if the Map contains 2 key-value pairs, it displays 3 records and ...
My goal is to create a responsive grid with square images, where the first image is double the size of the others. While I can achieve this using jQuery, I am curious if there's a way to accomplish this purely with CSS. Grid: Here's an example o ...
I recently launched a basic Node.js website but encountered an unusual issue. When trying to style the body using the default style.css stylesheet provided by Express, I found that it was not recognizing it. The only workaround was to add the class body di ...
I'm trying to customize the background color of alternating rows in a Bootstrap 3 grid. I attempted to use CSS and add it to the class within the div, but unfortunately, the color isn't changing as expected. Below is the CSS code I used: .row-b ...
Is there a solution when you click the button to display content, then click the button to hide it, and then click the button again to show it repeatedly? I'm not sure how to solve this issue. Can anyone help me out? Thank you! Here is the HTML code: ...
I currently have a global variable named calculated_price that stores the price of a specific product. This global variable's value is modified by one function, and then passed to a server via an AJAX post request by another function: var calculated_ ...
i have a form similar to this one. https://i.sstatic.net/V7ivb.png how can I replace this form each time the country changes, by removing it and then appending it again from a looping array. If there is only one set of data, display an "Add Form" Button; ...
As a newcomer to HTML, I find myself faced with a challenge. I have a folder containing 100 images, all sharing a common prefix in their names but differing in the second part. For instance, some examples include: "content_diffusion_delay_AthfT@jurEYTgf" a ...
Can someone please advise me on how to remove special characters in ASP (classic)? I am using an MS Access database. Is there a function similar to stripslashes() or addslashes() in PHP that can help with this? Any assistance would be greatly appreciated ...
Can anyone help me with adding a javascript tag to a content page of my asp.net application? The script is working fine with html tags, but it's not functioning properly within the content. Here is the code snippet that displays a datetime picker: &l ...
Looking for help with converting a jQuery selector to a cssSelector in Selenium. Here is the jQuery selector I have: jQuery("iframe#msg_body").contents().find("html body div span").text() I need to use this as a cssSelector in Selenium, similar to the fo ...
I am facing an issue with a 9-cell grid that contains images using Bootstrap columns. The grid is responsive and functions perfectly when only images are present. However, I want to make the images clickable by placing them inside anchor tags (<a>). ...
I'm seeking advice on implementing live update messages in my code. Here's what I have so far: <script> function fetch_messages(){ var user_id = "1" // example id $.ajax({ url: "do_fetch.php", t ...
Attempting to create a website featuring a collapsible navbar, but encountering some issues. The button is properly identified with the correct ID assigned. Jquery and bootstrap have been included in the necessary order at the bottom of the body. However, ...
I am experimenting with a responsive design and facing an issue - the width of my #menu in CSS is initially set to 0, but I need to change this value based on user input using JavaScript. Now, I want to dynamically adjust the width of the menu for differe ...