I am trying to add 3 buttons in a div which has "info" class as shown
below( this is basically footer section). Code is shown below
<div class='info'>
<a class="button" href="#">Full Site</a>
<a class="button" href="#">Feedback</a>
<a class="button" href="#">Contact Us</a>
</div>
I want to show these 3 buttons at left, center and right.
(Above code just shows "Contact Us" button on top of the page). How do
I fix this?
I'm no jQTouch/CSS expert, but I believe this is related to the button class you're using for each link.
The button class absolutely positions items at the top, which is why your buttons aren't appearing in the footer. Additionally all three buttons are being positioned in the exact same spot, but you're only seeing the last/latest one - the Contact Us button.
The CSS file that contains this class is located within each of the theme folders (apple, default or jqt). Each one has a theme.css file.
Again, not being a strong CSS person... my advice would be to create a new class. Keep the attributes you like from the existing button class, but maybe remove the position aspects of it. This will largely depend on what kind of look and feel you want to keep/maintain.
Additionally, it may be easier for you to place your buttons within an unordered list. This gives you some more flexibility when trying to position things through CSS.
<div class='info'>
<ul class="newULClass">
<li><a class="newButtonClass" href="#">Full Site</a></li>
<li><a class="newButtonClass" href="#">Feedback</a></li>
<li><a class="newButtonClass" href="#">Contact Us</a></li>
</ul>
</div>
Related
We upgraded from JSSOR 26.5.2 to 27.5.0, and found that we are no longer able to use "link slides" as described in the JSSOR documentation here:
https://www.jssor.com/development/define-slides-html-code.html
The issue seems to be a DOM change in JSSOR 27. Now there is a new DIV element, the one with data-events=auto and data-display=block, that acts as a kind of "glass" in front of the actual image (the one with u=image). As a result, any ... that surrounds the actual IMG can never be clicked, because the z-index of this "glass" prevents the click on the .
In our case, we've always been using a construct like this:
<a u="image" href="..." style="display: block;">
<img src="..." alt="..."/>
</a>
It's always worked until now. Is this a bug in JSSOR?
Your code is correct.
Anyway, here is an example, hope this helps.
https://www.jssor.com/jssordev/problems/image-slider.slider
https://www.jssor.com/jssordev/problems/image-slider.slider/=edit
The output code is as below,
<a href="#">
<img data-u="image" src="//jssorcdn7.azureedge.net/demos/img/gallery/980x380/004.jpg" />
<div data-t="0" style="position:absolute;top:30px;left:30px;width:500px;height:40px;font-family:Oswald,sans-serif;font-size:32px;font-weight:200;line-height:1.2;text-align:center;background-color:rgba(255,188,5,0.8);">responsive, scale smoothly</div>
</a>
Edit
I got the problem, the new version improved to use <a> element as whole slide.In this manner, you can add anything inside without hiding the link area.
That's to say, as <a> is a slide, you can remove the parent <div> element.
I'm using the form navbar-search. I want to have an "advanced search" modal that opens from a link within the navbar.
If I put the modal div within my tag in the navbar, when the modal opens it is behind the darkened area that is normally outside of the modal window. Clicking anywhere closes the modal and the darkened mask.
I can fix this by moving the modal div outside of the navbar (and, thus, outside of my form) but then it breaks my form functionality. The advanced search modal is supposed to function as an extension of the form field directly in the navbar but if I use two different forms to fix the modal problem, the forms don't work together any longer. Does that make sense?
If I enclose the entire nav bar plus my modal (which is outside the navbar) in a tag, it works but screws up some of the navbar formatting so I'm thinking this is not a very clean solution.
So, I either need to a way to fix the modal display issue or a way to make my form situation work properly (as in, linking two forms together without having a ton of duplicate markup for hidden fields and the like).
Thanks for any ideas!
Matt
Here is what I have now (which I've gone ahead and just adjusted css afterward to make things line up). I don't think it is semantically correct according to how bootstrap's navbar is supposed to be used, but my form is working correctly and that is a big deal to me. :)
<form>
<navbar></navbar>
<modal></modal>
</form>
I am a little unsure what you are asking, but this is a stab at what I think you are asking. The modal does not actually need to put the code for the modal in the form itself. The only thing you need in the navbar is the link and trigger activating the modal.
<form>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Advanced Search</li>
</ul>
</div>
</div>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Advanced Search</h3>
</div>
<div class="modal-body">
<p>Put your search fields here. </p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Search</button>
</div>
</div>
See working link.
http://jsbin.com/ifaqaj/1/edit
Using
<div class="lift:Menu.builder"/>
menu on website is vertically, any ideas because i cant found anywhere, how to make menu across ?
This is more a CSS question than a Lift question. The HTML produced for the menu looks something like this:
<div class="column span-6 colborder sidebar">
<hr class="space" />
<ul>
<li> <span>Home</span></li>
<li> Login</li>
<li> Sign Up</li>
<li> Lost Password</li>
<li> Search</li>
</ul>
...
</div>
I.e., about as vanilla as possible, so it's very easy to add some CSS to create a horizontal menu out of the list—see for example the "Horizontal lists" examples on Listamatic.
It would be simplest just to add the CSS code to the header in src/main/webapp/templates-hidden/default.html, but you could also use your own separate CSS file without too much fuss.
So I am trying to add the following "Like Us On Facebook" code in the header of my website and have it be right justified, while the Title & Description remain left justified. Here is the FB code:
<div class="fb-like-box" data-href="http://www.facebook.com/HowToForiPad" data-width="292" data-show-faces="false" data-stream="false" data-header="false"></div>
I'm not the most knowledgeable about this type of thing so I'd prefer not to mess with the CSS and have been just trying to drop the code above into the appropriate place in my header.php file. The tricky part (for me) is making the Facebook Like right aligned while the site title and description remain left aligned.
Here is an example of what I want it to look like (ignore the underscores...had to do it to make it look right)
WELCOME TO WHATEVER SITE
The site does blah blah________________________________________Like us on facebook
Here is the relevant code from the header.php:
<!-- HEADER -->
<div id="header">
<div class="website-name"><?php bloginfo('name'); ?></div>
<div class="slogan"><?php bloginfo('description'); ?></div>
</div>
<!-- /HEADER -->
So basically I'd like the Facebook code to be in line with the site description but right justified (whereas the site description is left justified).
Greatly appreciate any help!
Using CSS is pretty much your only option.
You can change the slogan div to a span (or set a width on the div), add the fb like box below this span and float it right. That should do what you need.
If you REALLY don't want to touch your CSS file, you can add the styles inline, but I don't recommend this as it is not best practice.
I have a custom Wizard, defined as follows:
<wicket:panel>
<div>
<form wicket:id="form" class="wizard">
<span class="wizardoverview" wicket:id="overview"/>
<div class="wizardheader" wicket:id="header"/>
<div wicket:id="view" class="wizardpage"/>
<span wicket:id="feedback"/>
<div class="buttons">
<span wicket:id="buttons"/>
</div>
</form>
</div>
</wicket:panel>
The wizardpage is in this case a Panel with its own form.
This form contains a new Panel, which in turn contains a GridView.
The GridView contains a set of Panels, which each contain a FormComponentFeedbackBorder, which in turn contains input TextFields.
Phew!
So we have this:
Wizard->WizardpagePanel->Form->GridContainingPanel->GridView->Panel[]->FormComponentFeedbackBorder->TextField
When TextField fails validation, no feedback is rendered at all.
If I add a FeedbackPanel to the GridContainingPanel the error messages are rendered, but FormComponentFeedbackBorder renders nothing.
Any pointers as to what can be wrong?
I had a similar problem with a ListView instead of GridView, but that problem was resolved when I set listView.setReuseItems(true);
Is there a similar setting for GridView, or is there a different solution to this problem?
That was it:
gridView.setItemReuseStrategy(new ReuseIfModelsEqualStrategy());
solved the problem.
Thanks, rotsch.