logo
down
shadow

jQuery css3 attribute not working


jQuery css3 attribute not working

By : Katie
Date : November 22 2020, 10:31 AM
this will help Just add px or % to your current function since translate doesn't know what to do with a plain integer.
code :
var containerHeight = $(".item").height();

$(".word-game .nWord").css({
    "transform" : "translate(0,"+containerHeight+"px)"
});


Share : facebook icon twitter icon
jQuery .position() strangeness while using CSS3 rotate attribute

jQuery .position() strangeness while using CSS3 rotate attribute


By : user2761996
Date : March 29 2020, 07:55 AM
Does that help I'm getting absolutely positioned rotated elements position with jQuery .position() method, then setting position-related attributes (top, left) with jQuery .css(pos), where pos is the data returned by .position(). I think it'll leave the element in it's place, but elements position is changing.
code :
// Needed to read the "real" position
$.fn.adjustedPosition = function() {
    var p = $(this).position();
    return {
        left: p.left - this.data('dx'),
        top: p.top - this.data('dy')
    }
};
$(function() { 

    var img = $('img'),
        pos;

    // Calculate the delta
    img.each(function() {
        var po = $(this).position(), // original position
            pr = $(this).addClass('rot').position(); // rotated position

        $(this).data({
            dx: pr.left - po.left, // delta X
            dy: pr.top - po.top // delta Y
        });
    });

    // Read the position
    pos = img.adjustedPosition();    
    alert(pos.left + '/' + pos.top);     

    // Write the position
    img.css(pos);

    // Read the position again
    pos = img.adjustedPosition();    
    alert(pos.left + '/' + pos.top);

});
Background attribute not working CSS3

Background attribute not working CSS3


By : Ihor Ilkevych
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further if the css file and image are inside in the different folder you must do this code
code :
.menu {
    background:url('../images/menu.svg');

    background-repeat: no-repeat;
    background-size:cover;
    background-position:center center;
    height:50px;
    width:50px;
    position:absolute;
    top:7px;
    left:7px;
    transition: all .5s cubic-bezier(.67,.99,.48,.96);
    z-index:2000;
}
How to select the sub attribute of CSS3 matrix transform with jQuery

How to select the sub attribute of CSS3 matrix transform with jQuery


By : Hosam Sarhan
Date : March 29 2020, 07:55 AM
To fix this issue You can use getComputedStyle to get the value of the transform property and then split it (or use a RegEx, whichever you prefer) to obtain the individual values like in the below snippet.
code :
var el = document.querySelector('.test'),
  op = document.querySelector('output'),
  btn = document.querySelector('.change'),
  oldparams, newparams;

window.onload = function() {

  /* get matrix on load */
  oldparams = getMatrix();
  op.innerHTML += 'Original Matrix Row 3: ' + oldparams[8] + ',' + oldparams[9] + ',' + oldparams[10] + ',' + oldparams[11]; /* since array is 0 based, 8 - 11 is the 3rd row. */

  /* on click of button, change matrix and get the changed value */
  btn.addEventListener('click', function() {
    el.style.transform = 'translate3d(0px, 0px, 480.89px) matrix3d(-0.959423, 0.0701992, -0.273093, 0, 0, -0.968514, -0.248959, 0, 0.383571, 0.578857, -0.639215, 0, 0, 0, 0, 1) translate3d(230px, 369px, 0px)';
    newparams = getMatrix();
    op.innerHTML += '<br><br> New Matrix Row 3: ' + newparams[8] + ', ' + newparams[9] + ', ' + newparams[10] + ', ' + newparams[11]; /* since array is 0 based, 8 - 11 is the 3rd row. */
  });
}

function getMatrix() {
  var matrix = window.getComputedStyle(el).transform;
  /*op.innerHTML = 'Matrix Transform is:' + matrix; */

  var params = matrix.split('(')[1].split(')')[0].split(',');
  return params;
}
.test {
  transform-style: preserve-3d;
  width: 460px;
  height: 738px;
  transform: translate3d(0px, 0px, 480.89px) matrix3d(-0.959423, 0.0701992, -0.273093, 0, 0, -0.968514, -0.248959, 0, 0.281971, 0.238857, -0.929215, 0, 0, 0, 0, 1) translate3d(230px, 369px, 0px);
}
<h2>Output</h2>
<output></output>
<button class='change'>Change Matrix</button>
<div class='test'>Some text</div>
Using jQuery to set Title on attribute in parallel with CSS3 :after

Using jQuery to set Title on attribute in parallel with CSS3 :after


By : Alyx Xoma
Date : March 29 2020, 07:55 AM
around this issue Unfortunately there is no simple CSS way of disabling tooltips with CSS. I'd suggest that using the title attribute in your example is not really semantic anyways (title attributes are meant to explain what's behind a link).
The alternative would be using html5's data attributes, which would make your code look like...
How to select a sub attribute of CSS3 in JQuery

How to select a sub attribute of CSS3 in JQuery


By : Сергей Бузун
Date : March 29 2020, 07:55 AM
hop of those help? You can retrieve the CSS property through jQuery then split the value by , and get the 4th item from the resulting index, like this:
Related Posts Related Posts :
  • Do the action when the DIV comes in the display area of the browser with jQuery
  • jQuery slideshow overlapping CSS ribbon
  • JQuery animate function dont work
  • problems charts jquery highcharts
  • How to reset the select box values in Jquery sumoselect Multi select plugin
  • css absolute position on top of another element
  • How use jQuery String variable in html body
  • Get a row from table in view on modal bootstrap using codeigniter
  • How to make the effect of a div that covers an other div when scrolling?
  • Data binding using a button
  • How do i replace all dot in string to Underscore?
  • grab non-sibling element with jquery
  • Select a word and click it
  • Trigger modal instead redirect to /users/sign_in path, Rails 4 with devise
  • Combining Parent theme JS and CSS
  • Angular ui-grid - DropDown Selection shows Id
  • jquery addclass when there is content on body
  • JQUERY : CSS does not apply to dynamically created elements
  • Bootstrap multiselect dropdown checkbox not working on paginated table
  • JQuery scroll to dynamic id
  • Jquery first time tried ajax
  • Disable the link on the active tab (Bootstrap)
  • How to handle this validation when a div is added?
  • how to show/hide and check/uncheck checkboxes dynamically inside kendo grid
  • Conditional parameters for AJAX function
  • Jquery add class to input checkbox field
  • Bootstrap countdown timer Jquery
  • Open the closest modal of jQuery clicked element
  • change background color of specific button on click
  • Can I create link as post to 3rd party site and open in new tab?
  • ID is 'undefined' using .each()
  • Using .each() for targeting each child differently in Jquery
  • How to return data from functions in function
  • Execute this jquery only when viewport is bigger than
  • Bootbox showing white box behind dialog
  • Toggle multiple classes with prevAll(), nextAll(), slice(), and duplicate classes... better way?
  • Show/hide list items and add more/less link
  • Going through all occurences of class on slider change
  • Call jQuery valid() without updating the screen
  • hide and show ActionLink and save data in database - MVC
  • Pass each object in JSON array to query
  • Toggling content div on one-page site with jQuery
  • Foundation Equalizer is setting height to inherit?
  • carousel navigation each function
  • changing color of text color with input slider
  • jquery: filter using AND OR in selector
  • Call a function If any Item is chosen From select box , After Dom update
  • Target class within a jquery object
  • How to scroll a web page with fixed navigation bar just before arrive to a section or div?
  • How to add a class name to a specific selector
  • How to prevent background scrolling
  • How can I disable previous/next in OwlCarousel2 if there aren't enough items to scroll?
  • How to pass products and quantities to ASP.NET MVC4 Web API from form submit
  • WordPress One Page Style Menus Scrolling
  • jquery.unobtrusive-ajax.js is not capturing the Submit event
  • Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'
  • can't get correct checkbox value
  • jquery tooltipster plugin, hide all tips?
  • How to set 3 different colors at jQuery UI Slider
  • How to convert a string to html and add a event, descard after use?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org