jqm flipswitch, float label left, switch right? - javascript

I am trying to get a bunch of flipswitches on a page in a mobile app.
I am using:
<div class="ui-content">
<form>
<fieldset>
<div data-role="fieldcontain">
<label for="checkbox-based-flipswitch">Checkbox-based:</label>
<input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch">
</div>
</fieldset>
</form>
</div>
It seems my "container" field is shortened. It does not stretch the entire width of the screen.
What am I missing?
I am looking to have the option fill the entire width of the screen. Label left, flipswitch right.

In this case a jQM grid might work better for you than a fieldcontain:
<div class="ui-grid-a flipContain">
<div class="ui-block-a">
<label for="chk1">Checkbox-based:</label>
</div>
<div class="ui-block-b">
<input type="checkbox" id="chk1" data-role="flipswitch" />
</div>
<div class="ui-block-a">
<label for="chk2">Checkbox-based:</label>
</div>
<div class="ui-block-b">
<input type="checkbox" id="chk2" data-role="flipswitch" />
</div>
</div>
Then with CSS, you can align the second column to the right and set the column widths as desired:
.flipContain .ui-block-a {
width: 70%;
line-height: 48px;
}
.flipContain .ui-block-b {
width: 30%;
text-align: right;
}

Apparently field-contain has been deprecated in 1.4 and will be removed in 1.5.
Can't you use a table width 100% and table cell ?
JsFiddle
<table width="100%">
<tr>
<td><label for="checkbox-based-flipswitch">Checkbox-based:</label></td>
<td><input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch"></td>
</tr>
</table>
And you can set the cell alignement as you want, as in the exemple both are centered.
td{
text-align:center;
}
You can set the alignment directly on the td JsFiddle :
<td align="right">

Related

Overlaping text with radio buttons in bootstrap col

I have a radio button with .html added to it. But the result it's a overlap text with the radio button.
Overlapping Radio buttons with text.
Also as you can see the text goes downward instead of covering all of the bootstrap col-4 , col-4, col-4.
function addQAs() {
randQuestion = Math.floor(Math.random() * library.length); //this is a nuber, dont forget!
console.log(randQuestion);
$("#question").html(library[randQuestion].question);
$("#answer1").html(library[randQuestion].answer[0]);
$("#answer2").html(library[randQuestion].answer[1]);
$("#answer3").html(library[randQuestion].answer[2]);
}
<div class="container-fluid">
<form>
<div class="row">
<div class="col-4">
<input type="radio" id="answer1" value="answer1" index="0">
<label for="answer1"></label>
</div>
<div class="col-4">
<input type="radio" id="answer2" value="answer2" index="1">
<label for="answer2"></label>
</div>
<div class="col-4">
<input type="radio" id="answer3" value="answer3" index="2">
<label for="answer3"></label>
</div>
</div>
</form>
</div>
I havent tried any CSS for this issue.
Thanks
try to add this css
.col-4 {
position: relative;
}
input[type="radio"] {
position: absolute;
left: -15px; // set as per your requirement
top: 5px; // set as per your requirement
}

What CSS code can I use to style this how I want?

Quick Image #2
How can I move this text box up and put information in the circled area in CSS? I am more of the developer type rather than a designer, so I need help with this. The text area should be exactly the same.
Thanks!
EDIT: As for the rest of the form, I want it to be centered in the second half of the screen. Hopefully I clarified.
Try this;
<div style="float:left;width:200px;height:200px">
<textarea style="width:100%;height:100%"></textarea>
</div>
<div style="float:left;width:200px;height:200px">
<div>
<input type="text">
</div>
<div>
Circled Area
</div>
</div>
use div float:left property for that
DEMO:
div.main{
float:left;
}
.txt{
height:600px;
width:300px;
}
<div class="main">
<input type="textarea" class="txt">
</div>
<div class="main">
<div>
<input type="text" class="txt2"></div>
<div>
<input type="text" class="txt2"></div>
</div>
other method
you can use <br> tag
DEMO
div.main{
float:left;
}
.txt{
height:600px;
width:300px;
}
<div class="main">
<input type="textarea" class="txt">
</div>
<div class="main">
<input type="text" class="txt2">
<br>
<input type="text" class="txt2">
<br>
<input type="text" class="txt2">
</div>
Float the text area to the left and put a div around the circled content and float it right. The text box will rise to the top in the middle.

How do I make a button-like filter?

I want to make a button-like filter in my web. Right now, I just put the radio-button filter inside the box, but I want to remove the radio button and just make the filter work when I just click the box.
The code looks like this right now:
<div class="question-header" data-bind="visible: jobQuestions().length > 0">
<div class="col-sm-3" id="filter-1">
<div class="panel-body">
<input type="radio" value="new" data-bind="checked: jobQuestionsFilter" class="" />
New Questions
(<span data-bind="text: newJobQuestionsCount"></span>)
</div>
</div>
<div class="col-sm-3" id="filter-2">
<div class="panel-body"">
<input type="radio" value="ignored" data-bind="checked: jobQuestionsFilter" />
Ignored Questions
(<span data-bind="text: ignoredJobQuestionsCount"></span>)
</div>
</div>
<div class="col-sm-3" id="filter-3">
<div class="panel-body">
<input type="radio" value="answered" data-bind="checked: jobQuestionsFilter" />
Answered Questions
(<span data-bind="text: answeredJobQuestionsCount"></span>)
</div>
</div>
<div class="col-sm-3" id="filter-4">
<div class="panel-body">
<input type="radio" value="all" data-bind="checked: jobQuestionsFilter" />
All Questions
(<span data-bind="text: allJobQuestionsCount"></span>)
</div>
</div>
</div>
What do i have to fix?
EDIT:
When I try to hover it, the bg-color of the entire box changes, but when I just click it only the part of it changes. I am assuming this is because the label size is not full. How can I fix this issue?
You can fix this by adding an id to each of the radio buttons and then wrapping the .panel-body in a label like this:
<label for="radio1">
<div class="panel-body">
<input type="radio" value="new" id="radio1" data-bind="checked: jobQuestionsFilter" class="" />
New Questions
(<span data-bind="text: newJobQuestionsCount"></span>)
</div>
</label>
Then in your css apply display: none to all the radio buttons you want to hide.
EDIT
I have created a codepen that will give you the desired results. The only thing you will need to do is arrange the buttons horizontally like the image you provided. I hope this gets you on the right track.
Play around with that for a while to familiarize yourself with how it works.
Give the input an id, use a label with the for attribute to connect the label to the input, hide the input, and use the :checked pseudo class and adjacent sibling selector to style the label when an input is selected by clicking on the label.
And since you want to only be able to select one input at a time, you need to give the elements a name attribute so they're all tied to providing a value for that name
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background: #09c;
}
label {
height: 100%; width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<div class="question-header" data-bind="visible: jobQuestions().length > 0">
<div class="col-sm-3" id="filter-1">
<div class="panel-body">
<input type="radio" value="new" data-bind="checked: jobQuestionsFilter" class="" id="new" name="someName" /> <label for="new">New Questions (
<span data-bind="text: newJobQuestionsCount"></span>)</label>
</div>
</div>
<div class="col-sm-3" id="filter-2">
<div class="panel-body">
<input type="radio" value="ignored" data-bind="checked: jobQuestionsFilter" id="ignored" name="someName"/><label for="ignored"> Ignored Questions (
<span data-bind="text: ignoredJobQuestionsCount"></span>)</label>
</div>
</div>
<div class="col-sm-3" id="filter-3">
<div class="panel-body">
<input type="radio" value="answered" data-bind="checked: jobQuestionsFilter" id="answered" name="someName"/><label for="answered"> Answered Questions (
<span data-bind="text: answeredJobQuestionsCount"></span>)</label>
</div>
</div>
<div class="col-sm-3" id="filter-4">
<div class="panel-body">
<input type="radio" value="all" name="someName" data-bind="checked: jobQuestionsFilter" id="all"/> <label for="all">All Questions (
<span data-bind="text: allJobQuestionsCount"></span>)</label>
</div>
</div>
</div>

Button not clickable even though the keyboard shortcuts are working

I want to keep track of certain timers. Upon clicking the button the clock ticks down to zero. However, after adding in a background frame and image my buttons have stopped working. I've implemented keyboard shortcuts that initiate the timer so my javascript functions are ok.
<body align="center">
<div id="header">
<h1>Welcome to LoL Buff Timers!</h1>
<h3>Like us on FB</h3>
</div>
This is where I insert the background "frame" which I declared in my CSS. The middle is a white image that goes over the background and the HTML button elements set to opacity. I declare this to have a z-index of -1 in my CSS.
<div id="frame">
<img id="middle" src="white.jpg">
<table align="center">
<th colspan="2">
<div id = "CustomHeader">
<img src = "shyvana.png">
<h1>Salazar44</h1>
<br>
<h3>Jungle</h3>
<h5>Shyvana</h5>
</div>
</th>
<tr>
<td>
<div id="container">
<div id = "buffs">
<label class="title">Blue Buff:</label>
<br>
<button class="buffbutton" type="button" id="yosb" onclick="startBlue();">Start Blue</button>
<label class="bluetime" id="mins">05:</label>
<label class="bluetime" id="sec">00</label>
</td>
<td>
<label class="title">Red Buff:</label>
<br>
<button class="buffbutton" type="button" id="yosr" onclick="startRed();">Start Red</button>
<label class="redtime" id="mins1">05:</label>
<label class="redtime" id="sec1">00</label>
</div>
</td>
</tr>
<tr>
<td>
<div id="globalobj">
<label class="title">Dragon:</label>
<br>
<button class="buffbutton" type="button" id="drag" onclick="startDrag();">Start Drag</button>
<label class="dragtime" id="mins2">06:</label>
<label class="dragtime" id="sec2">00</label>
</td>
<td>
<label class="title">Baron:</label>
<br>
<button class="buffbutton" type="button" id="worm" onclick="startWorm();">Start Baron</button>
<label class="wurmtime" id="mins3">07:</label>
<label class="wurmtime" id="sec3">00</label>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
change
#frame{
position: absolute;
}
http://jsfiddle.net/Cyf4Z/1/show/
Buttons are now clickable, but some error with the script/jsfiddle, try changing in your code.

Why is my JQuery DIV transparent?

My Jquery ajax page loads and shows up in the DIV that lays itself over the other page elements but the DIV is transparent or it is in fact behind the other components and just looking like it is transparent and neds to render on top. How do I achieve a normal DIV over the other pages with a white background? Why is it difficult making an element not transparent? How can this be deafult behavior for a page element?
Javascript
function popup() {
alert('opening popup');
var popup = $('.newpopup');
$.ajax({url:'/PandoraArendeWeb/popup.jsp',
error: function() {
alert('Error');
},
success: function(data) {
popup.html(data);
popup.show('fast');
}
}
);
/*
popup.html("test");
popup.show('fast');
*/
var screen_width = $(document).width();
var screen_height = $(document).height();
var box_width = popup.width();
var box_height = popup.height();
var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
var left = (screen_width - box_width) / 2;
popup.css({ 'position': 'absolute', 'top':top, 'left':left });
}
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
I tried creating a jsfiddle to reproduce the problem but it seems jsfiddle can't do .getor .ajaxsince it couldn't load a page from the internet to the DIV.
What can you propose? There should be a clear solution to this and transparancy really should not be a default state for an element so how come the element renders with transparency?
The HTML is trivial
<div class="newpopup">
</div>
<button id="mypopup">popup</button>
My CSS which is like it is never reached is this
.newpopup {
z-index:100;
position: absolute;
top:50%;
left:50%;
background-color:#ffffff; //not working
}
And the HTML that is the actual popup / div is this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><link href="css_js/styles.css" rel="stylesheet" type="text/css">
<title>popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb">
<tr>
<td colspan="3" class="pusher TB_nb"><h2>Sök person/företag</h2>
</td>
<td><a href="javascript:void(0)" onclick="document.getElementById('popupSokNamn').style.display = 'none';" >X</a></td>
</tr>
</table>
<br><br>
<h2 class="pusher">Sök person/företag</h2>
<div id="Vsok">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;">
<span onClick="getElementById('sokF').style.display='', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display='none'" class="link_sm">Visa sökformulär</span>
</div>
</div>
<div id="sokF">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;">
<span onClick="getElementById('sokF').style.display='none', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display=''" class="link_sm">Dölj sökformulär</span>
</div>
<div style="width: 100%; margin-left: 15px; margin-right: 80px;" class="fontS80">
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Fysisk</legend>
<div class="fl30"> Förnamn:</div>
<div class="fl50"><input type="text" size="60" name="searchFornamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Efternamn:</div>
<div class="fl50"><input type="text" size="60" name="searchEfternamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset>
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Juridisk</legend>
<div class="fl30"> Företag:</div>
<div class="fl50"><input type="text" size="60" name="searchForetag" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Organisationsnummer:</div>
<div class="fl50"><input type="text" size="60" name="searchOrgNummer" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset> <br><br>
<!-- <div class="fl30">Attention, c/o etc.:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postadress:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postnummer:</div>
<div class="fl50"><input type="text" size="30"></div>
<div class="clear"></div> -->
<div class="fl30">Postort:</div>
<div class="fl50"><input type="text" size="40" name="searchPostort" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30">Land:</div>
<div class="fl50"><input type="text" size="2" name="searchLandKod" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<select name="searchLand" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">---------------------------------</option>
</select></div>
<div class="clear"></div>
<!-- <div class="fl30">Region:</div>
<div class="fl20"><select name="">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">-----------------------------------------------</option>
</select></div>
<div class="clear"></div>
<div class="fl30">Tel:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">Fax:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">E-post:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
-->
<div class="fl50"> </div>
<div class="fl5"><input type="button" value="Rensa"></div>
<div class="fl10"><input type="button" value=" Sök " onclick="javascript:doSubmit('Namnsokning', 'search')"></div>
<div class="clear"> </div>
<div class="clear"> </div>
</div>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center">
<tr>
<td><h3>Sökresultat:</h3></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4">En massa text <span class="link">Hjälp!</span> </td>
</tr>
<tr>
<td><input type="button" value="Visa alla"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="smallb">
<td>Antal ärenden: 527</td>
<td> </td>
<td>Visa ärenden: << 1-200 201-400 401-527 >> </td>
<td> </td>
</tr>
</table>
<table width="100%" cellspacing="0" align="center" class="sortable" id="unique_id">
<tr>
<th class="thkant">Förnamn</th>
<th class="thkant">Efternamn</th>
<th class="thkant">Adress</th>
<th class="thkant">Postnr</th>
<th class="thkant">Postort</th>
<th class="thkant">Region</th>
<th class="thkant">Land</th>
<th class="thkant">Telefonnummer</th>
</tr>
</table>
<div id="bottomV">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" id="visaknapp" value="Visa" disabled style="width:150px;" onClick="getElementById('sokR').style.display='', getElementById('bottomA').style.display='', getElementById('bottomV').style.display='none', getElementById('Vsok').style.display='', getElementById('sokF').style.display='none'"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" disabled style="width:150px;"></td>
</tr>
</table>
</div>
<div id="bottomA" style="display: none">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" value="Ändra i register" style="width:150px;"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" style="width:150px;"></td>
</tr>
</table>
</body>
</html>
There should be a clear solution to this and transparancy really
should not be a default state for an element so how come the element
renders with transparency?
Actually, unless you specify an explicit background colour for an element the default is that they are transparent. This is so that the real page background can show through.
Just putting a background colour (and a z-Index if appropriate) on the popup div should then make it appear as an overlay as expected.
If it's not working then something is preventing the (correct) CSS you've supplied from being used.
Perhaps you should remove the extra HTML body etc from the loaded page? You shouldn't have two <body> tags present in the page at once. If you can't change the loaded page (e.g. if it's also used as a standalone page) then try something like:
popup.empty().append($('body', data).children());
instead of:
popup.html(data);
use following code to apply the background color to the div
$(".newpopup ").css('background-color', 'white');
So, if I'm reading this right, your jQuery script is reading a .jsp file, which has the full header setion, body etc...
You should either place the contents of the popup into an iFrame or strip out all the tags before (and including) the <body> and after (and including) </body>
you will try this attributes in .newpopup class
'overlayShow' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'opacity' : '0.80';
or
#popup {
margin: 0 auto;
height:100%;
width: 100%;
z-index:501;
background: #effeef;
position: absolute;
padding:0;
top: 0;
-moz-opacity:0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
filter:alpha(opacity=100);
}
#window {
padding:0;
width: 200px;
height: 200px;
margin: 0 auto;
border: 3px solid #d3d4d3;
background:url(sign_in_bg.gif) repeat-x;
position: absolute;
top: 200px;
left: 45%;
}
<div id="popup" align="center" style="display:none">
<div id="window" align="center">
content....
</div>

Categories