So basically I am trying to scale a div (starts from 0) when another is clicked but the scale origin should start from where the click happened. Sort of what apple does when you click on an app (the app opens up from where you clicked it).
The problem is trying to set the property of the scale origin which I do successfully but when i click on the div, this has no effect ! It only works when I set a timeout function to when I add the class that scales it fully
Class appeared to have been added before css is applied:
var xPosSTR = 30+'px';
var yPosSTR = 30+'px';
$('.box-detail').css({
'transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px',
'-webkit-transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px'
});
$(".box-detail").addClass("box-reveal-prop");
Class is applied with a delay (which scales from the origin specified but takes time)
var xPosSTR = 30+'px';
var yPosSTR = 30+'px';
$('.box-detail').css({
'transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px',
'-webkit-transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px'
});
setTimeout(function(){
$(".box-detail").addClass("box-reveal-prop");
}, 2000);
css: {
.box-detail {
display: inline-block;
position: absolute;
height: 100%;
width: 100%;
transition: 0.3s;
z-index: 1000;
transform:scale(0,0);
}
.box-reveal-prop {
transform:scale(1,1);
}
Can I achieve the same thing without the timeout function, Thanks !
You would want to bind to transitionend
$('.box-detail')
.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
function(){
$(".box-detail").addClass("box-reveal-prop");
});
You may see the js fiddle here
Related
I'm working on a leaflet js map atm.
There are some items that I want to apply a class to, depending on their inner text. Seems as though two circles at a certain size just overlap. Adding some CSS in that case so they're no longer overlapping.
//function searches for all <text> elements within svg tags for the queryText
// and then appends them with the appendText
function addClasserino() {
let elements = document.querySelectorAll('map-marker marker-bg-condition'); // get all circle elements as a NodeList
elements.forEach(el => { // go through each text element
if (el.innerText < 10) { // if the innerHTML matches the query HTML then
elements.addClass('updated'); // add the class
}
})
}
document.addEventListener("DOMContentLoaded", function(){
//pass in the search text and the appending text as arguments
addClasserino();
});
This is what I got so far. Doesn't seem to be working.
.map-marker.marker-bg-condition needs to be moved across a bit. Got the CSS here:
.map-marker.marker-bg-condition.updated{
margin-top: -19px;
margin-left: -19px;
}
With Leaflet JS, the zoom level changes and items are updated accordingly. This of my map showing all details at the world view, and then breaking down to state as you zoom in.
The unexpected behavior is that the css isn't applying and where bubbles are overlapping is because of this. This is the original code but I can't change it and get it to work even with an if statement.
getMarkerHtml: function(count, color) {
var size = this.getMarkerSize(count);
var hsize = (size / 2) - 6;
var font = count < 1000 ? Math.ceil(size / 3) : Math.ceil(size / 4);
if(count < 100) {
font = font + 3;
}
var cluster_classes = [
'map-marker',
'marker-bg-' + (Filters.colors.profile === color ? 'profile' : 'condition')
];
if(this.zoomLevel !== 'zip') {
size = size * 1.5;
if(petMapFilters.colors.profile !== color) {
hsize = size / 2;
}
}
if(this.zoomLevel === 'zip') {
var cluster_styles = [
'margin-left: -' + hsize + 80 + 'px;', NOTE: I tried this to offset on zip zoom bit it's not working END OF NOTE
'margin-top: -' + hsize + 80 +'px;',
'width: ' + size + 'px;',
'height: ' + size + 'px;',
'font-size: ' + font + 'px;'
];
} else {
var cluster_styles = [
'margin-left: -' + hsize + 'px;',
'margin-top: -' + hsize + 'px;',
'width: ' + size + 'px;',
'height: ' + size + 'px;',
'font-size: ' + font + 'px;'
];};
var div_style = [
'line-height: ' + (size - (size * 0.3)) + 'px;'
];
count = this.formatCount(count);
return '<div class="' + cluster_classes.join(' ') + '" tabindex="0" style="' + cluster_styles.join(' ') + '"><div style="' + div_style.join(' ') + '">' + count + '</div></div>';
},
Please let me know what I am doing wrong here as I am not able to identify this myself.
The issue at hand:
Thanks.
I read news on this Norwegian news site "www.vg.no" everyday. The other day I read it on my school computer which had adblock installed and I noticed that the ads were removed, all though an ad wrapper saying "turn off adblock etc" popped up instead. As I'm studying information technology in school I decided to take it on as a side project to make a chrome extension which completely removes those ad wrappers.
I made an extension and used a content_script which called a script once the page loaded. I called it script.js
So when the page loads, my script gets run. My script looks like this:
var element = document.querySelector('div.ad-wrapper');
element.parentElement.removeChild(element);
This works great, but then I encountered a new problem. The div which wraps around the ad wrapper changes name on every page load. I found a script on the site which randomizes the div class name every page load.
It looks like this:
<script>
window.__AB__ = function() {
var dummy = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5),
css = dummy + '.' + dummy + '{' + 'display: block;' + 'position: absolute;' + 'top: 0;' + 'left: -180px;' + 'width: 180px;' + 'height: 700px;' + 'background: #19C url(//1.vgc.no/img/vgab.png) no-repeat bottom;' + 'color: #FFF;' + 'line-height: 1.4em;' + '}' + dummy + '.' + dummy + ' .t1 {' + 'padding: 260px 10px 67px;' + 'font-size: 18px;' + '}' + dummy + '.' + dummy + ' .t2 {' + 'padding: 0 451px 0 11px;' + 'margin: 0;' + 'font-size: 18px;' + '}' + dummy + '.' + dummy + ' h1 {' + 'margin: 0 0 16px;' + 'padding: 18px 11px 0;' + 'font-size: 26px;' + 'font-weight: normal;' + '}' + dummy + '.' + dummy + ' .zwei {' + 'padding: 11px 40px;' + 'position: absolute;' + 'right: 11px;' + 'top: 81px;' + 'background-color: #FFF;' + 'border: 1px solid #227196;' + 'color: #D00;' + 'font-size: 18px;' + 'text-transform: uppercase;' + '}' + dummy + '.' + dummy + ' button {' + 'padding: 11px 0;' + 'margin: 0 10px;' + 'background-color: #FFF;' + 'border: 1px solid #227196;' + 'color: #D00;' + 'font-size: 18px;' + 'text-align: center;' + 'font-weight: normal;' + 'width: auto;' + 'text-transform: uppercase;' + 'height: auto;' + 'line-height: 1.2em;' + '}' + '.tablet .reg-grid-main .ad[class*=smartboard], .desktop .reg-grid-main .ad[class*=smartboard], .tablet .reg-grid-main .ad[class*=netboard], .desktop .reg-grid-main .ad[class*=netboard] { min-height: auto; }',
text = '<p class="t1"> Ved å skru på annonser, hjelper du å finansiere tidkrevende og viktig journalistikk. </p>',
topText = ' <h1>Hei, kjære VG-leser!</h1><p class="t2">Vi har oppdaget at du blokkerer annonser. Vi i VG hadde satt stor pris på om du hvitlister oss slik at vi kan finansiere vår journalistikk med reklame og fortsette å være en gratis nyhetskilde.</p>',
browser;
if (navigator.userAgent.indexOf('Firefox') > -1 ? true : false) {
browser = 'firefox';
} else {
browser = 'chrome';
}
var style = document.createElement('style');
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
var left = document.createElement(dummy);
left.className = dummy;
left.innerHTML = '<!--googleoff: index-->' + text + '<!--googleon: index-->';
var right = left.cloneNode(true);
right.style.right = '-180px';
right.style.left = 'auto';
var topEl = right.cloneNode();
topEl.style.position = 'relative';
topEl.style.right = 'auto';
topEl.style.width = '100%';
topEl.style.height = '150px';
topEl.style.marginTop = '-1px';
topEl.style.backgroundImage = 'none';
topEl.innerHTML = '<!--googleoff: index-->' + topText + '<!--googleon: index-->';
var open = function(e) {
var pop = document.createElement('div'),
dim = 1000,
over = document.createElement('div'),
btn = document.createElement('a');
function close(e) {
e.preventDefault();
btn.removeEventListener('click', close);
pop.parentNode.removeChild(pop);
over.parentNode.removeChild(over);
return false;
}
btn.addEventListener('click', close);
pop.style.cssText = 'width:' + dim + 'px; height: auto; position: absolute; top: 50%; left: 50%; background-color: #fff; padding: 10px; margin-left: -' + (dim / 2) + 'px; margin-top:-390px;z-index: 2000;';
over.style.cssText = 'width: 100%; height: 100%; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: #000; z-index: 1999; opacity: .8;';
over.addEventListener('click', close);
var popText = '<h3>Slik skrur du på annonser</h3>';
if (browser === 'chrome') {
popText += '<div style="float: left; margin-right: 16px; padding-right: 16px; border-right: 2px solid #19C;"><p><strong>For Adblock</strong></p>';
popText += '<img src="//1.vgc.no/ab/chrome-1.png"><br>';
popText += '<img src="//1.vgc.no/ab/chrome-2.png"></div>';
popText += '<p><strong>For Adblock Plus</strong></p>';
popText += '<img src="//1.vgc.no/ab/chrome-plus.png">';
} else if (browser === 'firefox') {
popText += '<div style="text-align: center;"><p><strong>For Adblock Plus</strong></p>';
popText += '<img src="//1.vgc.no/ab/firefox.png"></div>';
}
popText += '<div style="text-align: center; padding: 20px 0; clear: both;"><strong>Takk for at du skrur på annonser på VG.no :-)</strong></div>';
pop.innerHTML = popText;
btn.innerHTML = 'Lukk';
btn.className = 'close';
btn.href = '#';
document.body.appendChild(pop);
pop.appendChild(btn);
document.body.appendChild(over);
return false;
};
var topBoard = document.querySelector('#ad-topboard, #ad-front-topboard');
if (topBoard) {
topBoard.style.display = 'none';
}
var btn = document.createElement('button');
btn.addEventListener('click', open);
btn.className = 'action-click';
btn.setAttribute('data-stats-type', 'exit');
btn.setAttribute('data-stats-string', 'Adblock::OpenPopup');
btn.innerHTML = 'Skru på annonser';
left.appendChild(btn);
var btn2 = btn.cloneNode(true);
btn2.addEventListener('click', open);
right.appendChild(btn2);
var btn3 = btn.cloneNode(true);
btn3.addEventListener('click', open);
btn3.className = 'zwei';
topEl.appendChild(btn3);
document.head.appendChild(style);
var con = document.querySelector('.reg-grid-container');
con.appendChild(right);
con.appendChild(left);
if (con.insertAdjacentElement) {
con.insertAdjacentElement('afterbegin', topEl);
} else {
con.insertBefore(topEl, con.firstChild)
}
if (window.xt_med) {
window.xt_med('C', 0, 'Adblock::Enabled', 'N');
}
(window.dablockTrigger = window.dablockTrigger || []).push('survey');
window.__AB__ = function() {};
};
</script>
Basically they are making a variable named dummy and giving it a random-generated name. So my question to you, here on stackoverflow, is, how can I get the class name of the div so that I can delete it? I feel it would be possible to convert the whole side script into string and then search for the dummy variable and then remove that script or something? Also, inside the div wrapping the ad, I see a paragraph <p class="t1"> and I tried to remove the parent which is the random generated name div but no luck. Any ideas?
Edit:
I tried calling the script in the manifest.json file once the root html has been loaded, so calling the script before <head> is created, but any changes I do before the site loads will most likely get overridden once the rest of the page loads right? Is there a way to make an uneditable function? for an example testfunction = function(){} and then in another script when they try to run testfunction = function(){var element = random} they dont override that function which was already declared?
It's almost been 2 years, but since then I have taught myself javascript + a whole bunch more stuff, and decided to do another take at this project. It basically took me less than 10 minutes coming up with a solution, and that solution is fairly simple.
I just completely ignored their "dummy" script and removed the 3 first div children elements of the container div. This is not the best solution as it is a little hard-coded. Anyways works like a charm though. So now I have a working extension :D
If anyone is interested, here is the simple .js code:
window.addEventListener("load", function(){
var topAdWrapper = document.querySelector(".reg-grid-container");
for(var i = 0; i < 6; i++)
{
topAdWrapper.removeChild(topAdWrapper.childNodes[0]);
}
var body = document.querySelector("body");
body.style.backgroundImage = "";
});
I am working with Jquery and I have a use case to add some elements dynamically on a button click.
While adding the 'select' dynamically, the select2 is not displayed when the add button is clicked for the first time, instead, a simple 'select' is displayed, and when we click on add button again, all the previous 'select' get formatted to select2.
I needed that when we click the add button, the first generated selects should also get the select2.
Following is the script:
var container = $(document.createElement('div')).css({
padding: '5px', margin: '20px', width: '400px', border: '1px solid',
borderTopColor: '#999', float: 'left', borderBottomColor: '#999',
borderLeftColor: '#999', borderRightColor: '#999'
});
var iCnt = 0;
function add()
{
if (iCnt <= 19) {
iCnt = iCnt + 1;
$(container).append($("<select class ='selinput' id=tb" + iCnt + " " + "value='Text Element " + iCnt + "' style='float : left; margin-right:70px;'>"));
//Add Property Selector
$(container).append(" ");
$(container).append($("<select class ='selinput2" + iCnt + "'' id=tb2" + iCnt + " " + "value='Text Element " + iCnt + " ' ><option value='equalto'>A</option><option value='notequalto'>B</option></select>"));
$(container).append(" ");
// ADD TEXTBOX.
$('select').select2({width : '20%'});
$(container).append('<input type=text class="input" id=tbtext' + iCnt + ' ' +
'placeholder="Value ' + iCnt + '" style="float : center;" /><br><br>');
// SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
if (iCnt == 1) {
var divSubmit = $(document.createElement('div'));
$(divSubmit).append('<input type=button class="bt"' +
'onclick="GetTextValue()"' +
'id=btSubmit value=Submit />');
}
// ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
$('#main').after(container, divSubmit);
}
// AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
// (20 IS THE LIMIT WE HAVE SET)
else {
$(container).append('<label>Reached the limit</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');
}
}
Following is the link to js fiddle:
https://jsfiddle.net/hns0qk2b/43/
Please advise.
Your only problem is that you need your new elements added to the DOM before you can initialize select2. Add the elements to the DOM first, then your code will work.
// ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
$('#main').after(container, divSubmit);
// Initialize select2
$('select').select2({width : '20%'});
See these changes applied to the fiddle:
https://jsfiddle.net/zjafvr3u/1/
I have a javascript loop that executes a transform3d animation. Everything is working great, but I wanted to see if I can add a delay to certain executions inside the loop (4 items total).
for (i=0,len=$clientsSections.length;i<len;i++) {
clientsSection = $clientsSections[i];
if (i == 0 || i == 3) {
finalTransitionTime = '600ms';
}
else if (i == 1 || i == 2) {
finalTransitionTime = '300ms';
}
clientsSection.style.webkitTransition = 'all ' + finalTransitionTime + ' linear';
clientsSection.style.OTransition = 'all ' + finalTransitionTime + ' linear';
clientsSection.style.msTransition = 'all ' + finalTransitionTime + ' linear';
clientsSection.style.MozTransition = 'all ' + finalTransitionTime + ' linear';
clientsSection.style.transition = 'all ' + finalTransitionTime + ' linear';
clientsSection.style.webkitTransform = 'translate3d(0,0,0)';
clientsSection.style.transform = 'translate3d(0,0,0)';
clientsSection.style.OTransform = 'translate3d(0,0,0)';
clientsSection.style.msTransform = 'translate3d(0,0,0)';
clientsSection.style.MozTransform = 'translate3d(0,0,0)';
}
What I want to do is run i == 0 and i == 3 immediately, but delay i == 1 and i == 2 by a couple hundred milliseconds. I am trying to figure out how to accomplish this, but I am struggling to make it happen with the for loop running 0,1,2,3.
CSS3 has a transition-delay property that may be what you want.
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay
Ex: transition-delay: 200ms;
The transition property also supports a delay.
http://css-tricks.com/almanac/properties/t/transition/
Ex: transition: color 300ms 200ms; (delays for 200ms, then runs the animation for 300ms)
I have the following JS code that changes the width depending on value of the data-percentage HTML attribute:
var addRule = (function (sheet) {
if(!sheet) return;
return function (selector, styles) {
if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
if (sheet.addRule) return sheet.addRule(selector, styles);
}
}(document.styleSheets[document.styleSheets.length - 1]));
var i = 101;
while (i--) {
addRule("[data-percentage='" + i + "%']", "width:" + i + "%");
}
See the demo: http://jsfiddle.net/YYF35/
Instead of width, for some elements I want to change their height.
How can I change the code so that depending on class of the div I change the height or width of element (depending on the data-percentage attribute number of course)?
I don’t want to create a different HTML attribute for it, like so:
while (i--) {
addRule("[data-percentage-width='" + i + "%']", "width:" + i + "%");
addRule("[data-percentage-height='" + i + "%']", "height:" + i + "%");
}
jQuery can be used as well. Any ideas?
Your code is adding rules. If you really want to be doing that, just add more rules:
var i = 101;
while (i--) {
addRule("[data-percentage='" + i + "%'].change-width", "width:" + i + "%");
addRule("[data-percentage='" + i + "%'].change-height", "height:" + i + "%");
}
Now, elements with the change-width class will have their width modified, and elements with the change-height class will have their height modified (and you can use both if you like).
Try this:
$("div[data-percentage]").each(function(){
$(this).css({
width: $(this).attr('data-percentage')
//height: $(this).attr('data-percentage')
});
});
http://jsfiddle.net/YYF35/1/