Is there a way to render the ugly sharepoint2007 menu as ul and li instead of table ?
Related
I have a jQuery UI accordion with Markup structure
<div id="accordion2">
<h3>title</h3>
<div>stuff texty</div>
<h3>title2</h3>
<div>stuff texty</div>
</div>
However, the second tab of the accordion is in a plainer format than the first (i.e. it has less pictures and is hence more mobile friendly).
I am want to use a media query to hide the first tab and its contents when screen width is less than 640px. I tried giving the first h3 and the first div tags a class of first and then used
#media (max-width: 640px) {
.first {
display: none;
}
}
To make them disappear... but it didn't work. Does anyone know how I can go about doing this?
try this as a CSS3 option:
#accordion2 h3:first-of-type
{
display:none;
}
if you cannot support CSS3 then give that first heading a class name and target that.
I have a div with divs inside. The outer one has overflow-y: auto;, so with many internal items the right scrollbar appears. After doing $('#container').selectable(); when I press left mouse button over the scrollbar, it doesn't scroll, but a dotted frame for selecting is shown.
I have found this solution: JQuery UI Selectable plugin: Make scroll bar not selectable when div overflows
Unfortunately, it doesn't work for me, because when I scroll to the bottom, the items stop being selectable. (Though the top ones continue). So, the question is: how make the scrollbar... mmm... a scrolling bar, without splitting the container into 2 divs.
Well, it seems to be all browsers problem: when you click on a scrollbar, a mouse event is fired. This is the real problem, jQuery UI just doesn't solve it. Let's fix it on our own in the jQuery UI .js file (not applied to the min version as it should be obfuscated AFAIK).
Add this condition
if (event.pageX > $(event.target)[0].clientWidth + $(event.target).offset().left)
return;
right after the
_mouseDown: function(event) {
I have seen a lot of such hacks with HasScrollbar() detectors, but don't get why didn't they just sum up client width (that is without scrollbar) and offset to make it relative to the document and compare with pageX. For me it works perfectly.
Use a wrapper div for this , Its working fine for me.
.selectable-wrapper { border-radius: 5px; min-height: 200px; max-height: 200px; overflow-y: auto; border: 1px solid #D1D1D1;}
.selectable { list-style-type: none;padding: 5px;}
<div class="selectable-wrapper">
<ul class="selectable">
</ul>
</div>
I'm looking for a solution that doesn't require JavaScript, jQuery or anything too advanced; mostly HTML/CSS as those are what I am restricted to using.
The idea I have is a layout with two smaller div classes within one div ID. Each box have their own content and are placed side by side. What I'm trying to accomplish is to create an anchor link within one div that changes its content to something else.
e.g. box 1 on default displays "abc" as its content while box 2 displays "def". When you click on an anchor link in box 1, the content would then change to 123-- without affecting what's in box 2 or moving it down with the anchor.
Hopefully that makes sense.
There's no code to edit/work off of so any help would be appreciated.
You can use the :target selector to hide both div, and show element with the ID in the URL hash:
div.MyBox {
display: none;
}
div.MyBox:target {
display: block;
}
Clicking an <a> tag pointing to #someId would then show that element.
How to Delete/Remove post title in blogger (in all the blog! not just static pages only!)? i mean in regular posts also.
thanks
Put in CSS [Go to Template, Customize, Advanced, Add CSS] or add this before ]]></b:skin> tag in Edit Template HTML, Expand Widget Templates:
.post-title.entry-title {
display: none;
}
DISPLAY:NONE is not typically advised, because Google may seem it as "Suspicious" manner for hidden keyword optimization.
Better, too EDIT HTML (under template) and put this line in comments ( ):
<!-- <h3 class='post-title ....</h3> -->
Customize the theme, using the theme editor available in the blog dashboard. Opt to customize the theme. Look for the advanced options. Give the 'post title' element a transparent colour and a 0px font.
Specifically:
Go to your blog dashboard.
Select 'theme' from the list in the left pane, then 'customize' in the centre pain (pane? pain?).
Then select 'Advanced' on the left.
Select 'post title' from the list that appears in the main pane.
Click on text-colour dropdown and select 'transparent.'
And change the font to 0px as well.
Click 'apply to blog'.
I have just added a Telerik menu to my MVC application. I also have many views that render Telerik grids on them.
Problem: My menu has one item with sub items. When I hover over that menu item, the dropdown slides beneath the Telerik Grid, which hides most of the sub items and makes it impossible to click them. Any idea how to make the menu dropdown slide over the grid instead of under it?
alt text http://www.slickappstest.info/telerik_menu.gif
I suppose this has something to do with the z-index of the menu. Try increasing it gradually (compared to the grid) until it displays over the grid table. Hope this helps.
Dick
in telerik.common.min.css delete the overflow:hidden; rule for selector .t-grid td so that it reads :
.t-grid td
{
vertical-align:middle;
line-height:1.6em;
text-overflow:ellipsis;
border-style:solid;
border-width:0 1px 0 0;
padding:.25em .6em;
}
the result will be :