I'm finally getting round to creating a website for my print design portfolio. I know exactly what I'm trying to achieve but being fairly new to web design I have found some limitations with the knowledge I have....
I have used css3 transitions (currently they only work in Chrome and Safari) to make flip cards which are triggered on hover - these work perfectly and are exactly what I am looking for. All I am now trying to do is add an JavaScript function (using jQuery) that permanently flips the card on click. I don't want it to disable the on hover function which is pure css though.
I have found this extremely difficult to implement.
The site is here:
www.samueljamesdesign.com
Any help would be greatly appreciated.
Just modify your CSS so that the rotation is also triggered by adding a class. For example, change this rule:
#card-container:hover .front {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
To this:
.card-container:hover .front,
.card-container.selected .front,{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
Note that you cannot use #card-container, as it is invalid to have multiple elements with the same ID in the document. Set card-container as the class instead.
To make things stay flipeed when clicked, with your new CSS, you do:
var tiles = $('#tiles .card-container');
tiles.click(function() {
tiles.removeClass('selected');
$(this).addClass('selected');
//To change the image in maincontent to match the
//one in the flipcard clicked on:
$('#maincontent .img-wrapper').empty().append($(this).find('img').clone());
});
Related
first time posting a question so sorry if I make mistakes.
I have the following JS code for creating "notes" with a specified rotation:
newNote.style.transform = rotate(30deg);
it works great but when I try to use this CSS it does not get applied (should reset the rotation):
.notes:hover{transform: none;}
so after some more trying I think it could be a bug as styling never apply on hover if they been applied in the JS (is there any fix for this or should it be reported as a bug?)
Using !important can help you. Example:
.notes:hover{transform: none !important;}
Please remove your js code and use these instead:
.notes { transform: rotate(30deg); }
.notes:hover{transform: none;}
The first line adds the rotation always.
If you want to add rotation in specific case, use these styles instead:
.notes.rotate { transform: rotate(30deg); }
.notes:hover{transform: none;}
In your js, add 'rotate' class to the element you need:
newNote.classList.add('rotate');
It will add the rotation.
Arrows of swiper not showed before swipe or change any property in css(not inline)
link of demo: http://sinneren.ru/side/giftormagic/views/index0.html
How to: To see my bug You must use browser in mobile orientation (Chrome, Safary, may be any else). Scroll to big white block with roses. Do you see arrows? Nope, and if you swipe once on it, or You change any property in css, or You change focus on block - they will be shown. It's magic. And it's shown before, but placed under white block. I change any styles, positions, used hacks with init-callback and timers to change inline styles - it's not working.
Since this only happens in Chrome (right?) it could be anti aliasing issue. Try this property:
-webkit-backface-visibility: hidden; on button style. If that doesn't help try:
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
I'm customizing a theme for a client and trying to find a way to remove the dropdown functionality of the main navigation links. When you click on a top-level link, the menu closes (or opens). I'm not sure why they built this into the theme as I think it's very confusing to the user, not to mention doesn't work properly on mobile. I really need the menus to open on hover but not onclick.
I believe this is being done using a combination of CSS3 and Javascript (https://github.com/viljamis/responsive-nav.js). There's probably a simple solution by just editing the responsive-nav.js. But I'm not a javascript coder. Any help would be GREATLY appreciated.
The site is here: http://www.gatewayfitnesscenter.com
Code I believe controls this: http://gatewayfitnesscenter.com/wp-content/themes/westand/scripts/frontend/responsive-nav.js
In your theme's scripts/frontend/functions.js, locate this block of code (two lines after "//menu toggle"):
jQuery("#menus li.sub-icon > a") .click(function(){
jQuery(this).next().toggle(200);
return false;
});
That is the click handler so go ahead and remove it and you should be good!
OK, so it turns out this will be a fairly easy CSS tweak to get what you want. Open the style.css file for your "westland" theme. Now, search for .navigation ul li:hover > ul {. The first line after that is visibility: visible;. Either delete that line or comment it out and save the file. If you really want to avoid unnecessary work in the browser, delete/comment the entire block within. I've included the entire block below after commenting it out.
.navigation ul li:hover > ul {
/*
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
*/
}
That should prevent hovering over those menus from showing the sub-menu.
I want to add multiple css styles to a dom element and it should also work in different browsers.
So, performance wise which one of the below would be the better option?
Adding all different prefixed css together leaving the browser to work on which one to select
domElement.style.cssText = "-webkit-transform: scaleY(1.25); transform: scaleY(1.25)";
Adding css based on the browser or platform programmatically
if(platform == "Chrome"){ //assume platform is found initially using js
domElement.style.cssText = "-webkit-transform: scaleY(1.25);
} else {
domElement.style.cssText = "transform: scaleY(1.25);
}
You should not try to optimize what the browser already does on its own.
Just throw in as many invalid CSS properties as you want. An invalid CSS selector or property is not evaluated by the browser.
You are doing some mistakes/errors:
1.) Do not use inline stylesheets. There are already too many question on SO on how to overwrite such inline styles. The short answer is: you can't. The longer answer is: you can, but not without opening a door to the !important hell.
2.) You are doing client-detection in a case that clearly requires feature detection. There is no possibility for your code to recognize, that a newer Chrome version already uses the un-prefixed notation of that property.
It would be much simpler and gaining more performance if you can do that without any JS at all:
.my-element:hover {
-webkit-transform: scale(0, 1.25);
-ms-transform: scale(0, 1.25); // IE9 only
transform: scale(0, 1.25);
}
Is it possible to rotate a div element using Javascript & NOT using HTML 5?
If so what attributes of the element do I set/change to make it rotate? Ie, div.what?
PS: When I say rotate I mean rotate an imagae around an axis, not every x milliseconds show a different image rotation.
Old question, but the answer might help someone...
You can rotate elements using proprietary CSS markup in all major browsers (the term HTML5 isn't specifically relevant here though).
Example of how to rotate a element 45 degrees using CSS:
.example {
-webkit-transform: rotate(45deg); /* Chrome & Safari */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9+ */
-o-transform: rotate(45deg); /* Opera */
transform: rotate(45deg); /* CSS3 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */
}
Yes, the MSIE syntax is that horrible. Note the "sizingMethod='auto expand'" - that's crucial to avoid the result being cropped.
I'm fairly sure Matrix transforms (at least in some capacity) are also supported In MSIE 6, but it's more pernickety about under what circumstances it supports them (and it's increasingly hard to care 8).
Yes, it is possible to rotate a div not using HTML5, but using CSS3.
You can experiment with CSS rotation on CSS3 Please (toggle the .box_rotate rule on).
For more info, Google for: css rotate
If you want a way to have rotated text that works on all browsers (including IE6) then try Raphaël.
I know I am late. For posterity's sake, I wanted to post this: This website is pretty good and it even performs the matrix transformations for its corresponding css3 counterparts
You can do it using Matrix in IE. Here is a function that solves it in a crossbrowser way.
http://kaisarcode.com/javascript-rotate
If you are looking for a way to do it instantaneously, than you can use
element.style.transform = "rotateZ(90deg");
Make sure to use quotes around the CSS statement.
If you want it over the duration of, say, a second (I know you don't want this, I am just doing it anyways), you can put
element.style.transition = "1s";
element.style.transform = "rotateZ(90deg)";