I'm using a php styleswitcher and alternate stylesheets to try to duplicate the function of browser zoom (keyboard cmd-plus or ctrl-plus).
Right now, the "zoom in" graphic is linked to an alternate stylesheet with the following css:
body {
zoom: 1.2; -moz-transform: scale(1.2); -moz-transform-origin: 0 0}
}
This works fine, but ideally I'd like to have the link trigger a relative zoom rather than an absolute zoom value -- so i would need to establish a variable that determined the user's current zoom level, and then increase that zoom by 120%. This way the same link could be clicked multiple times to increase the zoom incrementally.
Any idea how to do this?
I think this will need JavaScript.
If I remember it correctly, you can change/create CSS-styles with JS. So if you save a variable in JS and multiply it with 1.2 everytime the onClick of the link is triggered, it should create the same effect.
EDIT: I don't know if it's possible, but if you can multiply variables in LESS, you could that 'language'. As it's a combination of CSS & JS
Related
I am using border-image property to create styled components with 9-slice. Also I am using css transform: scale(x) property to scale down/up my elements based on screen sizes. The issue I am running into is that my 9-slice component looks fine when scale is set to a whole number like 1, 2, 3... but if its a float then the border shows 9-slice lines/gaps and I am having hard time fixing it.
I have tried setting different values for border-image-slice as well as the scale. Initially thought that it was causing this issue when the number after decimal point is odd but that was an odd thought anyway.
<div class="Primary-Back-Button" style="transform: scale(1.2);">
<button class="Primary-Button" id="">
<div class="Primary-Button-Content">Button</div>
</button>
</div>
Expected result would be to show no lines/gaps on the border when using scale or I would be willing to change how we scale the things too. I basically want to keep the same layout on a desktop app no matter what the screen size is. This is for a desktop game that I am working on and it uses JS on UI side.
Expected result when scale is a whole number which is set to 6 in this case:
Notice the lines when I set scale to 6.25
If anyone ever run into the same issue which is very unlikely but I did figure out a solution so I am gonna put it out there.
You will need to add perspective: 1px; to the root styles() and then wherever you are using transform: scale(x); make it transform: translateZ(0) scale(x);
I am still trying to understand why that works but at least works. And its CSS so there could be some magic involved.
There is an option in chrome that lets you change default font size (Small, Medium, Large, Very Large) and appearently the
-webkit-text-size-adjust:none;
line isn't supported anymore. Is there any other way I can prevent chrome from changing font size?
Chrome as any other browser has default values for how elements should look.
The best way to get what you want is to implement a css script that resets all the different elements to values you know, and from their set the elements to a new desired value.
h1,h2,h3,h4,p,a {
font-size: 50px;
}
You can also implement media-queries to change behavior as viewport change.
What you want to do, probably, is to operate backwards: instead of preventing the page to change the fonts size, you might want to re-calculate it based on the zoomed level in the user's window.
Have a look at this question, you can try to use the described methods to detect the zoom level in the browser and apply a "counter-zoom" to reset it to your default font-size: How to detect page zoom level in all modern browsers?
E.g.:
If the users zoom at 120% you want to set your font-size to 83.3333%
The formula is simply
function yourFontSize(zoomLevel){
return 100/zoomLevel*100
}
More examples:
If the users zoom at 110% yourFontSize(110) // returns 90.9090909090909
If the users zoom at 120% yourFontSize(120) // returns 83.33333333333334
If the users zoom at 150% yourFontSize(150) // returns 66.66666666666666
And so forth
Try this with jquery, I force the font-size to a specific size. Open your page, right click for Inspect. Minimize-maximize and when the text shrinks, at the top right corner you will see the screen size, force it like this:
$(window).resize(function() {
if ($(window).width() > 400 && $(window).width() < 1000)
$('#myParagraph').css('font-size', '40px');
});
I am using Weebly to create an online store, using a template and ran into something I dislike. Every time an user clicks on a product the product page comes up and if you hover over the product's image, a zoom function is initialized. How do I disable this effect?
I have a feeling that it is something simple like display:none; but I can't seem to figure out which class or whatever is associated with it.
The simple way is to hide the element that is placed over the image on hover via CSS:
.cloud-zoom-big,
#cloud-zoom-big {
display: none !important;
}
or
.mousetrap {
display: none !important;
}
The better way would be to disable the JavaScript, that is calculating the effect. It's located in your http://cdn2.editmysite.com/js/site/commerce-core.js at the beginning of the file. But this file is minimized, so its hard to remove the relevant code.
It's not necessary to make any custom code changes.
The zoom is going to be based on the size of the image that you upload. So, say for example your image is 300 pixels by 300 pixels there will be no zoom. Zoom starts at about 640 pixels. So, just make sure your image is smaller than 640 pixels.
Note:
If your image is 3000 pixels by 3000 pixels the zoom is going to be great! And an image that is somewhere in the middle of that is going to have about half the amount of zoom.
First timer here, I installed Lightbox and it is running brilliantly.
Buttons are not visible normally, but when i hover the where it should be, buttons becomes visible.
You have to check your lightbox.css file. By default Lightbox hides the controls. In the css you will see lines where the opacity is set to zero. So what you might be looking for is something like the following.
.lb-prev, .lb-next {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); //change to 100%
opacity: 0; //change to 100%
}
Since you say you say your a first timer I would recommend going through the CSS file and where you see something recarding the opacity change it saved it and check what it did, till you get the result you want.
I'd like to show a modal dialog using a 3D flip effect, exactly like the "3D flip (horizontal)" example in the Effeckt.css library.
However I really don't need the whole Effeckt library, since I just want this one effect. So I've tried to strip out the relevant bits of the library into free-standing CSS and JavaScript.
This is my attempt, but it's not working: http://jsfiddle.net/eJsZx/
As the JSFiddle demonstrates, it's only showing the overlap - not the modal itself. This is odd, because the element inspector suggests that the modal should be visible - it has display: block, visibility: visible and zindex: 2000 (higher than the overlay element).
This is the JavaScript:
$('button').on('click', function() {
$("#effeckt-modal-wrap").show();
$("#effeckt-modal-wrap").addClass('md-effect-8');
$("#effeckt-modal-wrap").addClass("effeckt-show");
$('#effeckt-overlay').addClass("effeckt-show");
$(".effeckt-modal-close, .effeckt-overlay").on("click", function() {
$("#effeckt-modal-wrap").fadeOut();
$('#effeckt-modal-wrap').removeClass("effeckt-show");
$("#effeckt-modal-wrap").removeClass('md-effect-8');
$('#effeckt-overlay').removeClass("effeckt-show");
});
});
What am I doing wrong?
There were a couple of issues in the code.
First, your styles were missing the following:
.effeckt-show .effeckt-modal {
visibility: visible;
}
This was causing the modal to remain invisible.
Once the dialog was visible, the dialog would rotate in just fine, however when being dismissed it would not rotate out. This was due to the following line:
$("#effeckt-modal-wrap").removeClass('md-effect-8');
If you want to remove this class, it would need to be done after the animation is complete otherwise the 3d effect is lost. It doesn't necessarily need to be removed, but that depends on what the rest of your content needs.
The final issue was that the wrapper, on completion of the fadeout, was getting its local style set to display: none. Because of this, the second time showing the dialog would cause it to simply appear because it was moving from display: none to display: block. There are a couple of options here.
Use CSS to animate the fade in/out.
Use window.setTimeout after calling $.show on the element to give the dom a chance to update.
The final result: Working Fiddle