If the left margin is equal to a percentage

I am trying to create a unique movement for my div - it should move left five times and then come back. To achieve this, I have the following script:

Javascrpit :

$(document).ready(function() {
  if(document.getElementById('twitter').style.marginLeft == "-278%")
  {
    (function($){
      setInterval(function(){

        $('#twitter').animate({
        marginLeft: '+=278%',
        },3000);

      }, 5000);

   })(jQuery);
  }else{
    (function($){
      setInterval(function(){
        $('#twitter').animate({
            marginLeft: '-=55.6%',
        },2000);

      }, 5000);
    })(jQuery);
  }
});

While I currently have a functioning script using pixels with the condition:

if($('#twitter').css("marginLeft")==('-5300px'))

I need to make it more responsive by using percentages instead. Can anyone help me with this modification?

EDIT :

The animation itself is working fine, but there seems to be an issue with the condition in the if statement.

Answer №1

To achieve the desired layout, consider using position: absolute along with the left property instead of relying on margin-left

<div class='facebook'>
  world
</div>

#facebook{
 position: absolute;
 left: -75%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to access the values of checkboxes that are initially checked by default

Recently, I was working on a project that involved multiple checkboxes. My goal was to have the checkboxes pre-checked with values in the form (using reactive form). Users should be able to unselect the boxes as they wish and the data would be stored accor ...

The progress bar feature in Pace.js for Ajax requests is malfunctioning

The instructions state that no code is generally required to use this feature. I have successfully integrated it into my website and it works well upon page load. However, when making an ajax request, it does not seem to work. Is there anything specific ...

Ways to adjust the height of a Vuetify v-autocomplete listbox (results area) through CSS

I'm looking to adjust the height of the Vuetify v-autocomplete component, which is currently set at 304px (possibly a calculated value). <v-autocomplete class="flex-grow-0 ml-16 mr-6 largecontent" prepend-inner-icon="mdi-magn ...

Once map layers have been loaded initially, they will not render again

I'm currently incorporating Mapbox GL into my Vue project using VueMapbox (0.4.1). <template> <MglMap :accessToken="accessToken" :mapStyle.sync="mapStyle" :repaint="true" @load="onMapLoaded ...

Using AJAX and PHP to retrieve and store variables in a database

This is my first time attempting this and I'm feeling frustrated because I'm struggling to figure out how everything fits together. I have a function that needs to call two PHP files - one for selecting information from a database, and the other ...

Obtaining information from an AngularJS Service Response and assigning it to the Controller Scope Object

I have a basic AngularJS 1.7 application where I am successfully fetching data from a web API using an AngularJS service. However, I am running into an issue where the data is not being populated in the controller scope object. I have verified that the dat ...

Retrieving an attribute through the act of clicking a button

How can I retrieve the rel attribute value when clicking on a button with the class selector? <button class="nameClass" rel="relName">Content</button> I am attempting to achieve this by: $(".nameClass").click(function(){ // Here is where ...

Turn off the nicescroll scroll bar that appears as a default feature

Is there a way to disable the nicescroll scroll bar that appears in red by default on my html page? It's causing issues with zooming in and breaking the layout. ...

Adjust the Bootstrap date-time-picker to accommodate various languages, while ensuring that the selected date and time are displayed in English

As I work on my app, I've implemented localization support for multiple languages. When initializing the datetimepicker in the app, I provide the current language like this: datetimepicker({ locale: languageObj.language, format: 'DD MMM ...

Issue with Angular Swiper carousel: Error message pointing to node_modules/swiper/angular/angular/src/swiper-events.d.ts

I am attempting to implement a carousel in Angular using Swiper (). An error message is appearing: Error: node_modules/swiper/angular/angular/src/swiper-events.d.ts:3:50 - error TS2344: Type 'SwiperEvents[Property]' does not meet the constraint ...

Exploring the KEY attributes within a JSON dataset

In my React project, I am working on displaying specific key values from a JSON response. For example, the fieldData {DMR_5_why_who_test: "test", why: test}. My goal is to only show the bolded or key values in my output. However, my current code is not a ...

Use CSS alignment to combine both the profile picture and title on a webpage

Is there a way to seamlessly integrate a profile picture with text (title) on my tumblr theme? My main challenge lies in getting the alignment right. Additionally, I want it to look good in responsive view. If the title becomes too long, it should wrap un ...

Initialize data only when the Nuxt.js application is first loaded

Exploring the world of nuxt.js, I find myself pondering on the most efficient way to fetch data using REST api. Within my store folder, the structure is as follows: store -posts.js -categories.js -index.js Initially, I attempted to set the da ...

Issue with the Styled Components Color Picker display

For the past 6 months, I have been using VSCode with React and Styled Components without any issues. However, recently I encountered a problem where the color picker would not show up when using CSS properties related to color. Usually, a quick reload or r ...

Change a comma delimited string into a JSON formatted array

Is there a way to convert a string of comma separated values into valid JSON format using either PHP or jQuery? The comma separated strings are currently stored in a database and have the following structure: Singapore,Andora,Australia The desired outpu ...

What is the best way to dynamically resize a text field based on the length of the typed text

I am looking to dynamically expand the width of an input text field when a user enters text into it. I am not sure how to achieve this functionality. Any guidance or help would be greatly appreciated. Is it possible to do this using Jquery or javascript? ...

The issue with Bootstrap 4 modal not closing persists when loading content using the .load() function

Having an issue with my Bootstrap 4 modal, as I'm loading the body content externally using .load(), but it's not closing when I click on the close buttons. Any help would be highly welcomed. JavaScript Code Used: if(status){ $('#cartMe ...

CSS menu with disappearing sub-menu on hover

I'm currently tackling a CSS-only menu project, but I'm struggling with keeping the sub-menu visible when moving away from the li element. The height should span 100% of the page, and the sub-menu should mirror the main menu, appearing to the ri ...

Enhance the functionality of Map.set by automatically storing the new entry on the disk as well

This code is intended for development purposes only, to resume work from where I left off when restarting the local server. I aim to avoid modifying the production code in any way. My goal is to save new entries to disk when using map.set(...). Below is a ...

Show the text based on the current count of the counter

Currently, I have a simple Javascript counter function: <body> <script type="text/javascript"> var clicks = 0; function onClick() { clicks += 1; document.getElementById("clicks").innerHTML = clicks; }; </ ...