Multiple buttons in the header - javascript

I'm trying to get the following effect in the jQuery Mobile framework:
|-------------------------------------------------|
|[button1] HeaderText/Image [b1] [b2] [b3] |
|-------------------------------------------------|
Where [b1], [b2] and [b3] are small image buttons in the Header.
Is this even possible currently?

just simple like this
<div class="ui-btn-right">
</div>

I have had troubles with this in the past. Trick is, force all of your links to be data-role="button" and wrap said links in a container with class="ui-btn-[left/right]" (respectively) This takes care of the traditional header button positioning and markup.
<div data-role="header">
<div class="ui-btn-left">
Button1
</div>
<h1>HeaderText/Image</h1>
<div class="ui-btn-right">
B1
B2
B3
</div>
</div>

Seems as if it is possible, check out this link:
Grouped buttons on the jQuerymobile Framework website.

This is how i did it. Some of the styling may not be necessary as the class used on the parent div should be enough.
<div data-type="horizontal" style="top:10px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right">
Team Call
Logout
</div>

In order to use your own image buttons on the right side you'll need to either float or position a div to the right, then add your buttons.
Then you'll need to override the jQuery mobile styles for those specific buttons to prevent them from getting the rounded, gradient button style that's automatically added by the library.
#header {
float: right;
}
#header .ui-btn-up-b,
#header .ui-btn-hover-b,
#header .ui-btn-down-b
#header .ui-btn-active {
border: 0px;
background: none;
}

Related

Hide specific div without css

If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.
You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/
There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...
You can do
document.getElementsByTagName("div")[0].style.display = 'none';

django-cms div tags with cmsplugin class interfering with slider

I am using Django CMS 3.0.3. I've written a cms plugin with 2 CMSPluginBase derived classes, one adds a slider to a placeholder and another one is for adding slides as children to the slider.
In live mode everything works fine, but when I am editing content, I can't use the slider. The reason is that django-cms is decorating the html code with additional elements like this:
<div class="slider">
<div class="cms_plugin cms_plugin-2" style="width: 0px; overflow: hidden; position: absolute; left: 0px; display: block;">
<!-- Slider Item -->
<div class="slider-item"> [MY SLIDER CONTENT] </div>
<!-- /Slider Item -->
</div>
</div>
I got the HTML/CSS/JS from somebody else and I would preferable not use another slider. What options do I have to work around this problem?
Is there a way in django-cms to switch off the wrapping of plugins in "content mode" only, but to have the placeholder <div> included in "structure mode"? That would not be super convenient, but a workaround that I can live with.
Is there something else, I could do? I don't want to touch the slider itself. It might get an update and then I'd have to adjust it to adjust the slider to my needs again.
django-cms is need to wrap your plugin with <div class="cms_plugin cms_plugin-2"> for relation with "structure mode". There are no other variants.

How to create page with multiple pages of data that can be toggled via a sidebar?

I want to create a simple website page that allows my users to flip through a few different sets of data (kind of like mini-pages) but without reloading the page. The data could all be preloaded or requested with Ajax for each selection.
I tried using Bootstrap to create Tabs, but the first screen would never disappear.
I'm not aware of any other way to do this, other than with complicated Javascript that sets visibility to invisible.
Are there any clean, convenient, HTML/CSS-only ways to go about this?
Below, are some prototype screenshots of what the page would look like, and how it changes with each sidebar selection.
You could do it without the use of JavaScript if you are willing to make the data sets change upon hovering the menu, instead of clicking it.
Here's a JSFiddle: http://jsfiddle.net/n8wF4/. It's quite ugly, but it works...
HTML:
<div class="menu">
<div class="menu-item-1">item 1
<div class="content data-set-1">Content 1</div>
</div>
<div class="menu-item-2">item 2
<div class="content data-set-2">Content 2</div>
</div>
<div class="menu-item-3">item 3
<div class="content data-set-3">Content 3</div>
</div>
</div>
CSS:
.menu {
position: relative;
}
.content {
display: none;
position: absolute;
right: 0;
top: 0;
}
.menu-item-1:hover .data-set-1,
.menu-item-2:hover .data-set-2,
.menu-item-3:hover .data-set-3 {
display: block;
}
no need to have complicated javascript.
Have a look at jquery ui tabs.
I believe you can't do the same thing in pure CSS. There are no click events in CSS.

Scrolling the page causes issues to buttons

I just finished a website, everything was working fine (what I thought)
Until I discover a huge BUG that couldn't fix:
I have a navigation BAR (png file) and added on it buttons (simple DIVs elements), When the page is openned 1st, all is fine, but if you scroll the page a bit, the buttons aren't working as they should.
Please check this link: (scroll the page a bit down and you'll notice that button aren't interacting anymore)
http://www.genius-solutions.net/GSIS/index.html
But if you move the cursor a bit above the buttons, you'll find them:
(HTML - JavaScript)
here the CSS part:
#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#html, body {
background:#002a4c;
overflow:scroll;
width:1024px;
height:768px;
margin: 20px auto; /* center */ padding: 20px;
}
and here the HTML part:
<body >
<div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>
<div id='applet_t'>
<div id='btn'>
<div id='btn1'></div>
<div id='btn2'></div>
<div id='btn3'></div>
<div id='btn4'></div>
<div id='btn5'></div>
<div id='btn6'></div>
</div>
</div>
<div id='inf'></div>
</div>
</body>
Your issue lies in IMO very improper use of absolute positioning of your elements. As soon as you scroll the page the location of the actual "hit" placeholder moves with the page but not your background.
Test case: try to move your page up a little bit and you will be able to "click" above the actual buttons.
Unless you have a good reason for absolutely positioned element use static == default positioning for most of your elements.

Alternative to jQuery's slideDown() and slideUp() not affecting the display property

I've been trying to use the slideDown() effect for a website I'm working on, but I'm having difficulty getting the effect I want. Here's a sample showing what I want to accomplish.
<div>
blahblahblahblah
<span id="span_more" style="display:none">
blahblahblah
</span>
<a class="link_more" id="more">More…</a></div>
</div>
Basically, when "More..." is clicked, I want the text that's currently hidden to appear using a sliding effect while staying inline with the end of the visible text. This doesn't seem possible with slideDown() because it is changing display to block.
Thank you very much.
Unfortunately, this is essentially impossible. jQuery's animation relies upon the element having height and width. Inline elements do not have these dimensions set or settable, so animations (whether using animate or slideUp) must make them block-level elements.
fadeIn does work, and may be a useful alternative.
You'll need to wrap your text that always shows in a span or div that floats left, have the "additional" text float left as well, and have your link clear: both;, but this structure will make a simple .slideDown() work:
<div>
<span style="float: left;">blahblahblahblah</span>
<span id="span_more" style="display: none; float: left;">
blahblahblah
</span>
<div style="clear: both;"><a class="link_more" id="more">More…</a></div>
</div>
Here's a demo showing this in action: http://jsfiddle.net/7yqMr/
I've had that problem before. At that time it seemed not possible to change the jQuery behaviour, and I ran into problems while writing a routine that would do the same with inline blocks. So, I switched to just using display: block elements with float: left to keep them in one line.
<div>
<div style="display: block; float: left;">blahblahblahblah</div>
<div id="span_more" style="display: none; float: left;">
blahblahblah
</div>
<a style="display: block; float: left;" class="link_more" id="more">More…</a></div>
</div>

Categories

Resources