Fit default icons into header button in jQuery Mobile - html

I'm trying to add a menu-style drop down button to the header of a mobile app created via jQuery Mobile, but I cannot find a way to fit the default 'gear' icon to the button. The following is the HTML page.
<div data-role="header">
<div data-role="popup" id="cfgMenu" data-theme="a">
<ul data-role="listview" data-inset="true" style="min-width: 210px;" data-theme="a">
<li data-role="divider" data-theme="a">Configura</li>
<li>Lingua
</li>
<li>Sci club
</li>
<li>Preferenze
</li>
</ul>
</div>
<h1>Title</h1>
</div>
</div>
With this HTML the result is the following:
If I add style="height:100%" to the <a> the result is the following:
What can I do to fit the icon into the image?
Just found that adding text everything is OK. But space in the header is limited, so I'd like to avoid this solution

For jQM 1.4 you use button classes instead of the data attributes:
DEMO

Related

How to add border for li for active link in html on scroll

Designing a single page application in reactjs.I have a fixed navbar on the top of the page and i have 4 section .on click of link in navabr it jumps to that particular section.But i want to highlight that li with small border below.if user scrolls to any section without clicking link in navbar,the link must be highlighted with border.
// header.js
<ul className="col-2 flex-row flex-justify-align-center ">
<li className="navigation__link">Problem</li>
<li className="navigation__link">Solution</li>
<li className="navigation__link">Footprint</li>
<li className="navigation__link">Services</li>
<li className="navigation__link">Contact</li>
</ul>
function App() {
return (
<div className="App">
<div id="problem"></div>
<Header></Header>
<div id="solution">
<Solution></Solution>
</div>
<div id="footprint">
<Footprint></Footprint>
</div>
<div id="contact">
<Contactus></Contactus>
<Footer></Footer>
</div>
</div>
);
}
Question is unclear because I didn't get how to frame question for this requirement.
You need to use scroll spy. Visit this git repository React-scrollspy.
relavent question: How to implement a scrollspy with React

header and footer column width problem - joomla

I want to style the header after the menu to be the same as the header before the menu.
Here is the page: https://www.nikolay100.com/en/?option=com_rspagebuilder&view=page&id=6
I cannot figure out why the column of the "Language switcher" is displayed so big. I want it to be as small as the one on top.
Also I would like the footer background of the top footer to be displayed in full width of the page. The same as the footer bellow.
Which css styles should I change and how.
Any help will be really appreciated.
Language switcher: the class 'col-md-4' makes the width 33.33%. The html (with inline styling) will have the wanted result.
<div class="col-md-4 duration-500" style="text-align: right;">
<div id="lang_and_search" style="background-color:#efefef;padding:5px;width: auto;display: inline-block;">
<div class="rspbld-module" style="padding:5px;">
<div class="mod-languages">
<ul class="lang-inline" dir="ltr">
<li><img src="/media/mod_languages/images/bg.gif" alt="Български" title="Български">
</li>
<li class="lang-active">
<a href="https://www.nikolay100.com/en/?option=com_rspagebuilder&view=page&id=6">
<img src="/media/mod_languages/images/en.gif" alt="English (UK)" title="English (UK)"> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
For the footer, it's because it's within the class 'container'. This has a max-width. Move the footer outside the container.

CSS can't check for focus

I have the following code in html:
<nav class="box">
<div class="logo">
<button class="c-hamburger c-hamburger--htx linksbuendig">
<span>toggle menu</span>
</button>(...)
</div>
</nav>
<div class="relative box">
<div class="nav">
<ul>
<li>
Login
</li>
</ul>
</div>
and this in CSS:
.c-hamburger:focus ~ div.nav {
margin:0;}
so if the button is focused the div should change the margin. But it won't work, until i copy the code for the button 1 to 1 directly over the div with the class nav. Why does it so and what can I change? Just copy solves the problem until now, but then is the full page destroyed, because there're other elements in between etc.
JS or sth. like that is not allowed. Please only CSS resp HTML.
Beforehand: Thanks!

HTML elements overriding each other

I am facing a weird problem in my HTML template.
Expected Layout is :
Navbar
Slider - Text on the slider
Some Section.
Result:
Navbar
1. Some Section
Slider - Text on the slider - Section on the slider i.e., below the navbar
I am using bootstrap.
Using 'Developers Tools' I found out that, the slider.js appends some div tags just before any other tags in the body. The whole area is covered by the slider div first. Then comes the navbar and section. Looks like there is no connection between navbar - section and slider.
The existing code looks like this in the browser in developer tools option:
<body>
<div class="slider></div>
<div class="container">
<div class="panel">
<img src="" class="" />
</div>
</div>
<nav>
</nav>
<section>
</section>
</body>
Please help me. I am unable to understand.
Thanks.

How to show/hide divs

I am trying to figure out how to do this... I have 4 divs that I am looking to show and hide one at a time. The link to the divs are in a separate nested div. Here's my code:
<div id="container">
<div class="roundbox">
<ul>
<li class="t">
Main
</li>
<li class="e">
News
</li>
<li class="t">
History
</li>
<li class="e">
Contact
</li>
</ul>
</div>
<div class="inceptioncontent">
<div class="content">
<div class="contentnest">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
</div>
</div>
</div>
</div>
I want the Main, News, Contact, and History links to show/hide the corresponding divs in the contentnest div. Any ideas? Thanks!
JQuery is great at doing his sort of thing. This looks like a good place to start: http://papermashup.com/simple-jquery-showhide-div/
It seems your looking for a drop down menu. You can achieve this:
Coding it in Javascript + css ( with a framework like jQuery it will be easier)
; With Css
; Downloading A plugin
I think the "Css only" is the best way, jQuery is cool and download a plugin it's the easiest way, but you need the js of the user's explorer to be on.
You can check how to do it only with css here:
https://www.grc.com/menudemo.htm