CSS Positioned Float in Reality

Question

CSS Positioned Float in Reality

I'm in need of a specific feature that IE supports, which can be clearly seen in action at

However, the issue arises as no other web browsers seem to support the particular attribute required for this functionality.

How can I achieve a similar effect on all browsers except IE? (The element in question needs to have a fixed position while everything around it is dynamic.)

I've attempted using the "shape-outside" CSS attribute: http://jsfiddle.net/uniqueID

-webkit-shape-outside: polygon(0px 280px, 100% 280px, 100% 500px, 0px 500px);

Unfortunately, the outcomes are inconsistent (with issues like disabled line breaks in Chrome) or not supported at all (in Firefox).

It seems like resorting to Javascript to manually adjust the DOM element's position within the document flow will be necessary. Is there a way to accomplish this solely with CSS?

css angularjs css-float css-position angularjs-ng-repeat

Answer 1

Answer №1

After some trial and error, I ended up implementing a solution like this: I created a function that would reposition the target block whenever the neighboring angular ng-repeat blocks changed or if the window was resized.

app.directive('onFinishRender', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      if (scope.$last === true) {
        $timeout(function () {
          scope.$emit('ngRepeatFinished');
        });
      }
    }
  };
});


    var injectItem = function(ngRepeatFinishedEvent) {
      if (typeof(ngRepeatFinishedEvent) !== "undefined") {
        if (typeof(ngRepeatFinishedEvent.targetScope.item) === "undefined") {return;}
        //additional validation logic
      }
      var index = 2;
      if (window.innerWidth < 1200) {index=1;}
      if (window.innerWidth < 768) {index=0;}
      var secondRow = jQuery('.items').eq(index);
      var injectable = jQuery(".injectable").eq(0);
      if (!secondRow.next().hasClass('injectable')) {
        jQuery(".injectable:not(:first)").remove();
        secondRow.after(injectable.clone().css('display', 'block'));
      }
    };
    $scope.$on('ngRepeatFinished', injectItem);
    window.addEventListener('resize', function() {
      injectItem();
    });

<span class="injectable" style="display: none;">fixed position content here</span>
<span ng-repeat="item in items" on-finish-render class="item">
  surrounding content
</span>

this particular approach was inspired by Calling a function when ng-repeat has finished

Answer 2

After some trial and error, I ended up implementing a solution like this: I created a function that would reposition the target block whenever the neighboring angular ng-repeat blocks changed or if the window was resized.

app.directive('onFinishRender', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      if (scope.$last === true) {
        $timeout(function () {
          scope.$emit('ngRepeatFinished');
        });
      }
    }
  };
});


    var injectItem = function(ngRepeatFinishedEvent) {
      if (typeof(ngRepeatFinishedEvent) !== "undefined") {
        if (typeof(ngRepeatFinishedEvent.targetScope.item) === "undefined") {return;}
        //additional validation logic
      }
      var index = 2;
      if (window.innerWidth < 1200) {index=1;}
      if (window.innerWidth < 768) {index=0;}
      var secondRow = jQuery('.items').eq(index);
      var injectable = jQuery(".injectable").eq(0);
      if (!secondRow.next().hasClass('injectable')) {
        jQuery(".injectable:not(:first)").remove();
        secondRow.after(injectable.clone().css('display', 'block'));
      }
    };
    $scope.$on('ngRepeatFinished', injectItem);
    window.addEventListener('resize', function() {
      injectItem();
    });

<span class="injectable" style="display: none;">fixed position content here</span>
<span ng-repeat="item in items" on-finish-render class="item">
  surrounding content
</span>

this particular approach was inspired by Calling a function when ng-repeat has finished

CSS Positioned Float in Reality

Answer №1

Similar questions

CSS styling on top points gets lost when scrolling

Jquery Mobile's CSS takes precedence over the CSS of my body

Why is the UI Router controller failing to function properly after loading the view from the $templateCache?

What's the best way to make sure an image and text are perfectly aligned on the

Is there any more Angular code to be bound using ng-bind-html or ng-bind?

What is the most efficient method to upgrade the Angular JS framework from version 1.2.2 to the newest 1.4.8?

The functionality of ngToast's newestOnTop feature is not performing as anticipated

What is the best way to center the input on the page?

AngularJS- numerous unique directives featured on a single page each with its distinctive state

Tips for adding elements to an angular $scope.array?

Incorporating a URL into an HTML marquee

The issue arises when a continuous use of angularjs directives linked with an external template fails to display correctly upon the addition of new

Conceal element with transparent overlay without affecting the background

JS form submission problem

Tips on stopping slideToggle from opening and closing when clicked for the first time

AngularJS POST request encounters failure: Preflight response contains improperly formatted HTTP status code 404

Determining if an invalid date was entered with Angular-Strap datepicker

Two distinct controllers: concealing elements through the operation of one of them

Using JavaScript to store CSS style properties in an array

What could be causing bootstrap to suddenly stop working?