How to create a navigation menu around an image - javascript

I have a heart and I need to construct the menu around that heart on both sides I have over 27 menu items.
I need it to be mobile friendly. Please any help?

You can use the transforms declarations of css to rotate the <span> of text.
http://www.w3schools.com/cssref/css3_pr_transform.asp
span#menu1 {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}

Related

Chrome Zoom Set To 100% Using Selenium C#

I am using below code in selenium c# to make chrome browser zoom to 100% using javascript.but its not working please help
var js = ((IJavaScriptExecutor)driver);
js.ExecuteScript("document.body.style.zoom = '100%';");
Zoom is a non-standard property, so it's not supported by all browsers.
I'd use transform scale instead, which is supported by all browsers.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
You will need to use prefixes for different browsers, see http://shouldiprefix.com/#transforms
.example {
-webkit-transform: scale(1); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: scale(1); /* IE 9 */
transform: scale(1); /* IE 10, Fx 16+, Op 12.1+ */
}
For your chrome use case, you would use:
document.body.style.webkitTransform = 'scale(1)'

Edge browser issue when using scale css

I have a scroll jacking on a video that scales the video container using css transform. It's working fine on all browsers however in IE and edge it does the scale transform but the video gets pixelated when the video is scaling up.
CSS
transform: translateY(0) scale(3,3);
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
Try this
-webkit-transform: translateY(0) scale(3,3);; /* android, safari, chrome */
-moz-transform: translateY(0) scale(3,3);; /* old firefox */
-o-transform: translateY(0) scale(3,3);; /* old opera */
-ms-transform: translateY(0) scale(3,3);; /* old IE */
transform: translateY(0) scale(3,3);; /*standard */
I suggest you to refer links below may give you some more information.
transform property
CSS Demo: transform
If still not work then I suggest you to provide your full sample code.
We will try to make a test with it and try to find a solution for it.

Make a DIV and all children elements smaller

I want to re-size a part of HTML in my design.
I need this change to happen as an animation.
The DIV itself and all it's inner elements i.e. Images, Paragraphs, Anchors etc should be re-sized just like when you re-size an image with a constant aspect ratio.
I think, the tool should get current height and width of element and increase/decrease them, but it won't work for texts, actually for a text element you need to change font size.
How can I do this in JS, CSS, HTML?
You can use CSS transform:scale
.small {
transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8); /* IE 9 */
-webkit-transform: scale(0.8, 0.8); /* Safari and Chrome */
-o-transform: scale(0.8, 0.8); /* Opera */
-moz-transform: scale(0.8, 0.8); /* Firefox */
}
EDIT: reference/credits: Shrink/Grow animation using jQuery/CSS

Vertical Tabs with Vertical Text in CSS

I have a series of .jpeg menu tabs, which contain vertical text, and are oriented vertically (height > width). Attempting to create vertical tabs, such that they go from the top to the bottom of the screen in series, but after reading some documentation, I'm still not sure exactly where to start. Any tips? Sorry for the extremely vague question, but most search results assume you want a vertical menu with horizontal text.
You can use word-wrap: break-word; combined with a narrow width value to force your text to wrap for every single letter: http://jsbin.com/ominus/1/edit
Rotating would look better, but it's another option!
If browser compatibility is not a priority, you can try using CSS3:
.rotated-text {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Should work on IE9+ */
}
Working example: http://jsfiddle.net/C3qrT/
Then you must work to align text as you want.

vertical menu/nav auto scrolling

I am looking for jquery plugin or something for my vertical menu. here is the scenario.. I have a long list of categories e.g. 70 categories, which I have to display in the right/left navigation, but I want them to display only 10 categories and soon as someone rolls over categories (up/down) it automatically scrolls up/down and shows remaining categories within the specific height (10 visible at a time), I hope my question is clear if not, I will demonstrate with images.. can someone please point me to the right direction.. thanks...
Edit: something like this but with only category names and in vertical direction : http://valums.com/files/2009/menu/final.htm
As MrOBrian said...you can edit the style part in the source code. This also depends on target browsers. Here is something to get you started...
div.sc_menu {
/* Set it so we could calculate the offsetLeft */
position: relative;
height: 145px;
width: 200px;
overflow: auto;
/* Added this part */
writing-mode: tb-lr;
filter: flipv fliph;
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
/* Added this part */
}

Categories