I have problem with tooltips on my magento website, I need to have one tooltip on product page which will show a HTML UL List. I tried some plugins I found but had problems with JQuery as it was disabling other prototype pop up I have on product page.
Im really a newbie at All the types of javascript and hope you experts can help me with this please.
My trigger id for tooltips is #why-to-buy
and the tooltip class in CSS is .why-to-buy-tooltip
can anyone suggest me a prototype or scriptaculous driven simple tooltip which can show HTML please?
Any help is more than welcome.
Thanks in advance.
Typically this can be done in just CSS. To start with there needs to be an anchor;
<a id="why-to-buy" href="#" onclick="return false;">
Why To Buy?
<ul class="why-to-buy-tooltip">
<li>Reason #1</li>
<li>Reason #2</li>
</ul>
</a>
The onclick is to prevent it working as a hyperlink. An anchor is necessary for older IEs to respect the following hover;
#why-to-buy {
position: relative;
}
#why-to-buy .why-to-buy-tooltip {
display: none;
position: absolute;
width: 200px;
height: 200px;
z-index: 100;
}
#why-to-buy:hover .why-to-buy-tooltip, #why-to-buy:active .why-to-buy-tooltip {
display: block;
}
If you need more info search for and read about "CSS popups". A nice touch is to add some CSS3 transitions - old browsers just ignore them and continue to work as normal.
This type of popup is limited because it is inside an anchor, and anchors cannot contain anchors. If the #why-to-buy element is of another type, such as a DIV, then IE doesn't pick up the :hover pseudoclass. For this special case a bit of JavaScript is needed after all.
$('why-to-buy').observe('mouseenter', function() {
this.addClassName('over');
}).observe('mouseleave', function() {
this.removeClassName('over');
});
Update the last stylesheet rule to include #why-to-buy.over .why-to-buy-tooltip. The bit of JavaScript is rarely needed and can go in /skin/frontend/base/default/js/ie6.js. Or you could encourage browser upgrades and choose not to support old IE at all.
A quick Google searched returned this one, and shows to support HTML:
http://www.nickstakenburg.com/projects/prototip/
It's prototype based so should work well with Magento.
Related
i actually really like this approach that is big img background, but i want it to be fluid with windows's height as well (before we scroll down to other section or div), so before reaching mobile screen, its height can always stretch and fill the whole browser screen while logo & content inside is always in the middle
i like this site, http://peterfinlan.com/, i emailed to enquire but never get any response about how to make it, i try to follow its css, but i just couldnt make my header as its, i dont really see any other flexbox css other than div.hero-content, and yes i am new to flexbox, does it have javascript or what?
can you help me?
To make a div fill the site using flex box, you need to do the following:
<body>
<div id="mainWrapper">
<div id="headerWrapper">
<!-- HEADER CONTENT HERE -->
</div>
</div>
</body>
with the following CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mainWrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
#headerWrapper {
flex: 1;
}
See an example in action here.
In this particular context, however, you don't necessarily need a flexbox as #mainWrapper already stretches over the complete site.
While flexbox is nice, don't force its usage just because it's new. Getting rid of flexbox and #headerWrapper wouldn't do any harm here.
Please note that I did not include any vendor prefixes here, so it may not work in all browsers as is. I recommend you use a tool like autoprefixer before you deploy your CSS.
I have implemented the default kendo menu using MVC. how do I change the colour and the look of it?
is there any helpful links? or any documentation? I know its all Css. I just need to know what the css is any help would greatly be appreciated.
Thanks
There are some official documents.
See this link if you are generally interested in how kendo UI can be customized.
And here, you can even style on the go what you like, and export the styles ass CSS or LESS.
Alternatively you can also include the ThemeBuilder on your site! See the 3-point instructions guide on the site.
3. Use the ThemeBuilder as a bookmarklet on your own pages! (Drag the button to your bookmarks bar)
EDIT:
Since you are wondering how to style the elements themselves, inspect the menu through a tool like firebug.
You would then see the structure of the menu, and can style the classes individually.
For example, the menu in this link, contains of the following html:
<ul id="menu" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" tabindex="0" role="menubar">
<!-- snip -->
<li class="k-item k-state-default" role="menuitem">
<span class="k-link">
Blog
</span>
</li>
<!-- snip -->
</ul>
You could then for example style the following:
.k-menu .k-item {
min-width: 140px;
}
EDIT 2:
To change the menu in the way that only the menu-items are colored, use the following definitions:
.k-menu.k-header {
background-image: none;
background-color: none;
}
.k-menu .k-item {
background-color: red;
}
I'm trying to edit a wordpress theme and I'm getting some problems with some images that just don't want to appear on IE8. Other versions of IE render the website as it should, but IE8 gives me this headache that I don't know how to cure.
Please take a look.
I really don't have any clues why this is happening.
Help!
The problem is caused by the images having this CSS rule:
max-width: 100%;
To fix it, you can remove that rule altogether if you don't actually need it, remove it just for Internet Explorer 8 (see this question), or add these two CSS rules to the parent a tag:
display: block;
width: 300px;
You have issue with your CSS on IE8. Try adding "width:30%;" on the div that holds the image something like this:
<div class="hentry post publish post-1 odd author-admin category-oferte-pelerinaje" id="post-32">
<div style="float: left; width: 30%;">
<A title="Pelerinaj la Schitul Sfantului Ierarh Modest – Judetul Arges" href="http://pelerinaje.tapet-online.ro/pelerinaj-la-schitul-sfantului-ierarh-modest-judetul-arges/"><IMG class="archive-thumbnail featured" alt="Pelerinaj la Schitul Sfantului Ierarh Modest – Judetul Arges" src="http://pelerinaje.tapet-online.ro/wp-content/uploads/2012/12/117491_ierah-modest-220x150.jpg" width=300 height=225></A>
In all my pages my content fit to the body:
But where i have forms they go over the footer and body don't resize:
Where is the problem?
Your form probably contains a lot of floated elements, so you might want add this to your <form> CSS:
form {
...
overflow: hidden;
}
I have experienced something similar this week.
Try using
<div style="clear:both"/>
to encapsulate your content within your page.
<div id="mainDiv">
content
<div style="clear:both"/>
</div>
the issue is clearly with floated elements in the form. You can fix it using the micro clearfix by Nicolas Gallagher, currently the "best practice" for the issue
http://nicolasgallagher.com/micro-clearfix-hack/
Don't use overflow: hidden; as it might give you trouble if you want any element to overflow the form. (eg. select).
Also, tables are not a good idea for the layout, and empty divs to clear are not necessary.
I am quite often coming across sites that respond to a click on a What's This or a Gallery link by poping up a window in front of the original page, and making the original page go dim.
Is this a fancy AJAX trick?
Is it only likely to be supported in certain browsers?
And most importantly, how is it done?
This is nothing more than adding a <DIV> that covers the entire screen, and give it a black background. jQuery's UI library will handle this for you automatically.
http://jqueryui.com/demos/dialog/#modal
Or you can do it with basic HTML/CSS/jQuery like this:
div.modal-bg {
background:#000;
position:fixed;
top:0; left:0;
width:100%;
height:100%;
z-index:10;
}
<div class="modal-bg"></div>
$(function(){
$("div.modal-bg").fadeTo("slow", .5);
});