Positionning a jquery table paginator - javascript

I'm using this pagination plugin http://www.jqueryscript.net/table/Easy-Table-List-Pagination-Plugin-With-jQuery-Paginathing.html
But I have a problem : I couldn't place the paginator where I want exactly! Please how can I fix this or is there any other plugin that we can change its position?
Here is my script :
$('#archTab').paginathing({
perPage:3,
limitPagination:{{ content|length // 3 }},
insertAfter: ('span#paginator')
});
And I have a span under the table :
<span id="paginator" style="position: absolute;top: 40vmin;"></span>

try margin-top
var content = 10;
$('#archTab').paginathing({
perPage:3,
limitPagination:content|length, //03
insertAfter: ('#paginator')
});
#archTab{
position: absolute;
background: red;
}
#paginator{
margin-top: 40vmin;
/*test*/
padding: 5px;
background: orange;
}
.pagination-container{
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Easy-Table-List-Pagination-Plugin-With-jQuery-Paginathing/paginathing.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="archTab">
<div id="paginator"></div>
</div>

Related

cant figure out jquery .show() and .hide(), im a noob very confused

I am working on a project, and cant figure out how to hide my welcome2 and welcome2-0 html code, then once the button is pressed show that information. im new with jquery, and am really confused tried looking this stuff up and still have little idea on how to fix this issue. i appreciate any help or input guys, sorry if anything poorly formatted.
var name ;
var nameFormat=true;
function submission() {
var name = document.getElementById("textbox").value;
if (name.length > 0) {
alert("Welcome "+name);
$("#name").fadeOut(1000);
$("#welcome").fadeOut(1000);
}
else{
nameFormat==false;
alert("Please enter the name again");
}
}
#welcome{
top:30px;
left: 30px;
color: antiquewhite;
border: 2px solid blue;
background: blue;
padding: 25px;
}
#name{
top:30px;
left: 500px;
color: antiquewhite;
background: blue;
border: 25px solid blue;
}
body {
background-color: lightblue;
}
#welcome2{
position: relative;
top:30px;
left: 30px;
color: antiquewhite;
border: 2px solid blue;
background: blue;
padding: 25px;
}
HTML
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Welcome!</title>
<link rel="stylesheet" href="includes/styles1.css" type="text/css" media="screen" />
</head>
<p>
<body>
<div id="welcome"><b>Welcome to the Myanmar Trivia Quiz</b><br> please enter your name and click on "Begin Quiz" to start</div>
<div id ="name"><b>Name:</b>
<input type="text" id="textbox">
<button id=”myButton” type="button" onclick="submission()" >submit</button>
</p>
<div id="welcome2">Myanmar Trivia Quiz </div>
<div id="welcome2-0">Test your Demographic Knowledge<br>--------------------------------------------------------------------------------------</div>
</div>
</body>
<script src="includes/project.js"></script>
</html>
3 things:
Your HTML was malformed
You need to set display: none on the css
for what you want to be hidden at the start
You need to call fadeIn
(or show) on the element AFTER fadeOut (or hide) has finished, you
can do that using promises and the fadeIn callback function
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
http://api.jquery.com/fadein/
var name ;
var nameFormat=true;
function submission() {
var name = document.getElementById("textbox").value;
if (name.length > 0) {
alert("Welcome "+name);
fadeOutWelcome().then(() => fadeInWelcome());
}
else{
nameFormat==false;
alert("Please enter the name again");
}
}
const fadeOutWelcome = () => {
return new Promise((resolve, reject) => {
$("#name").fadeOut(1000, () => resolve());
$("#welcome").fadeOut(1000);
});
}
const fadeInWelcome = () => {
$("#welcome2").fadeIn(1000);
$("#welcome2-0").fadeIn(1000);
}
#welcome{
top:30px;
left: 30px;
color: antiquewhite;
border: 2px solid blue;
background: blue;
padding: 25px;
}
#name{
top:30px;
left: 500px;
color: antiquewhite;
background: blue;
border: 25px solid blue;
}
body {
background-color: lightblue;
}
#welcome2{
display: none;
position: relative;
top:30px;
left: 30px;
color: antiquewhite;
border: 2px solid blue;
background: blue;
padding: 25px;
}
HTML
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Welcome!</title>
<link rel="stylesheet" href="includes/styles1.css" type="text/css" media="screen" />
</head>
<p>
<body>
<div id="welcome"><b>Welcome to the Myanmar Trivia Quiz</b><br> please enter your name and click on "Begin Quiz" to start</div>
<div id ="name"><b>Name:</b>
<input type="text" id="textbox">
<button id=”myButton” type="button" onclick="submission()" >submit</button>
</p>
</div>
<div id="welcome2">Myanmar Trivia Quiz
<div id="welcome2-0">Test your Demographic Knowledge<br>--------------------------------------------------------------------------------------</div>
</div>
</body>
<script src="includes/project.js"></script>
</html>
A few things:
Javascript is case-sensitive, so true is a reserved word, True is not. So instead of var nameFormat=True , you should do: var nameFormat= true .
Then, you're saying you want to hide welcome2 and welcome2-0 divs, but in your javascript code you're not doing this. If you want do this, do the following:
$("#welcome2").hide();
$("#welcome2-0").hide();
// or
$("#welcome2").fadeOut(100);
$("#welcome2-0").fadeOut(100);
There is another issue in your else block: you're doing nameFormat==false , which is just comparing if nameFormat is false. If you want to assign false to nameFormat variable, do this:
nameFormat = false;
Include the .hide() at the beginning of your javascript code (so that it executes at the very beginning) which would hide those 2 divs.
Then when the button is pressed, use .show() to show those 2 divs again.
Also, where you had nameFormat == false;, you need to change that to nameFormat = false;. == is the comparison operator, so it would look at that and say "Oh nameFormat is not false", and move on. If you wanted to make nameFormat be false (which I assume you did), you must use the assignment operator (which is =)
var name;
var nameFormat = true;
$("#welcome2").hide();
$("#welcome2-0").hide();
function submission() {
var name = document.getElementById("textbox").value;
if (name.length > 0) {
alert("Welcome " + name);
$("#name").fadeOut(1000);
$("#welcome").fadeOut(1000);
$("#welcome2").show();
$("#welcome2-0").show();
} else {
nameFormat == false;
alert("Please enter the name again");
}
}
#welcome {
top: 30px;
left: 30px;
color: antiquewhite;
border: 2px solid blue;
background: blue;
padding: 25px;
}
#name {
top: 30px;
left: 500px;
color: antiquewhite;
background: blue;
border: 25px solid blue;
}
body {
background-color: lightblue;
}
#welcome2 {
position: relative;
top: 30px;
left: 30px;
color: antiquewhite;
border: 2px solid blue;
background: blue;
padding: 25px;
}
HTML
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Welcome!</title>
<link rel="stylesheet" href="includes/styles1.css" type="text/css" media="screen" />
</head>
<p>
<body>
<div id="welcome"><b>Welcome to the Myanmar Trivia Quiz</b><br> please enter your name and click on "Begin Quiz" to start</div>
<div id="name"><b>Name:</b>
<input type="text" id="textbox">
<button id=”myButton” type="button" onclick="submission()">submit</button>
</div>
<div id="welcome2">Myanmar Trivia Quiz </div>
<div id="welcome2-0">Test your Demographic Knowledge<br>--------------------------------------------------------------------------------------</div>
</div>
</body>
<script src="includes/project.js"></script>
</html>
To achieve what you are trying to do, it's simply as:
var name;
var nameFormat=true;
function submission() {
name = document.getElementById("textbox").value;
if (name.length > 0) {
alert("Welcome "+name);
$("#name").fadeOut(1000);
$("#welcome").fadeOut(1000);
$("#welcome2").fadeIn(1000);
$("#welcome2-0").fadeIn(1000);
}
else{
nameFormat=false;
alert("Please enter the name again");
}
}
Since you showed up in your code fadeOut, I made my answer with that. Otherwise you can replace fadeIn with show.
About your CSS code, try to set display: none; for those elements that should be hidden when the page loads.
For more info look at:
http://api.jquery.com/show/

Jquery What have I done wrong?

$(document).ready(function(){
$('.fa').hide();
$('.icon').click (function(){
$('.icon').addClass('active');
if($(".fa").css("display") == "none") {
$(".fa").show();
}
if $('.icon').click && $('.icon').hasCalss('active') (function(){
$(".fa").hide();
});
});
});
I want it so that when you click on a div(in this case '.icon') The div .fa shows but when I click on it again and .fa is showing it hides .fa
In the console it keeps on coming up with these 2 errors
Uncaught SyntaxError: Unexpected identifier SyntaxError: Unexpected
identifier
but I don't know whats wrong as i'm quite new to jquery and java-script.
Help would be appreciated.
Thank you :)
You need to use toogle function :
$(document).ready(function(){
$('.fa').hide();
$('.icon').click (function(){
$('.icon').addClass('active');
$(".fa").toogle();
});
});
https://www.w3schools.com/jquery/eff_toggle.asp
If it is just about switching classes on click you can use the .toggleClass()-method:
Link to toggleClass() on http://api.jquery.com.
Just use your CSS-Class to manipulate the state.
$(document).ready(function(){
const icon = $('.icon');
icon.click(function() {
$(this).toggleClass("active");
});
});
.container {
border: 1px solid grey;
padding: 0.5em;
text-align: center;
}
.icon {
opacity: 0.5;
font-size: 48px;
color: #ddd;
transition: all 300ms linear;
cursor: pointer;
}
.icon.active {
opacity: 1;
color: #bada55;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>
<section class="container">
<span class="icon active">
<i class="fas fa-stroopwafel"></i>
</span>
<span class="icon">
<i class="fas fa-balance-scale"></i>
</span>
</section>

Jquery: show IMG on click

Preview of how it should be: https://www.youtube.com/embed/8qKRf0cg3Co
As in the video, I have to click on the img to get a large view of the img under it.
So far this is my code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JQUERY</title>
<script src="jquery/jquery-2.1.1.min.js"></script></head>
<body>
<center>
<div id="wrapper">
<div id="nav">
<div id="overbalk"></div>
<img src="images/foto_01.png" align="top" class="foto" />
<img src="images/foto_02.png" align="top" class="foto" />
<img src="images/foto_03.png" align="top" class="foto" />
<img src="images/foto_04.png" align="top" class="foto" />
</div>
<div id="content">
<img src="images/foto_01.png" align="top" class="slide_foto" />
</div>
</div>
</center>
</body>
</html>
CSS:
<style>
body {
padding: 0;
margin: 0;
background-color: black;
}
#nav {
width: 600px;
margin: 0px auto;
}
#overbalk {
width: 600px;
height: 30px;
position: absolute;
background-color: black;
}
.foto {
width: 75px;
height: 75px;
margin-top: -20px;
border: 1px solid black;
}
.foto:hover {
cursor: pointer;
}
#content {
position: absolute;
top: 50px;
z-index: -2;
width: 100%;
}
.slide_foto {
margin-left:-3200px;
}
</style>
JS:
$(document).ready(function (){
$('.foto').mouseenter(function () {
$(this).animate({marginTop: '+=50'}, 200);
});
$('.foto').mouseleave(function (){
$(this).animate({marginTop: '-=50'}, 200);
});
$('.foto').click(function () {
$(this).next('#content').show();
});
});
I also tried this:
$('.foto').on('click', function () {
$('#content').html(nieuwe_foto).show();
var nieuwe_foto = $(this).attr('src');
$('.slide_foto').attr('src', nieuwe_foto);
}
None of this worked, and got a little bit stuck, the images aren't showing below the small images.
You need to make 2 changes:
Remove this style class from <style>
.slide_foto {
margin-left:-3200px;
}
Make this change in your onclick handler
$('.foto').on('click', function () {
var nieuwe_foto = $(this).prop('src');
$('.slide_foto').prop('src', nieuwe_foto);
});
I have made a working fiddle with sample images https://jsfiddle.net/sachin_puthran/c2qgjpj1/
The following doesn't do anything since nieuwe_foto is undefined until the next line and div#content is already visible .show() doesn't do anything either.
$('#content').html(nieuwe_foto).show();
The .show() isn't what you're looking for. It will essentially "unhide" an element. So if an element has a display: none style then .show() will restore the initial display style. See the docs.
You're closer with your second attempt though. All you want to do in the $('.foto').click function is set the src of the .slide_foto element to what is currently in the src of the this object.

How to transfer listbox value to another listbox using jquery

i want to transfer the selected value from listbox 1 to listbox 2 viceversa using jquery
I have sample code below but it is not working.
Hi guys please, i want to transfer the selected value from listbox 1 to listbox 2 viceversa using jquery
I have sample code below but it is not working.
Hi guys please, i want to transfer the selected value from listbox 1 to listbox 2 viceversa using jquery
I have sample code below but it is not working.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Listbox.js Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"> </script>
<script>
$(function () {
$('select#planets').listbox();
$('select#country').listbox({'searchbar': true});
});
</script>
<script language="javascript" type="text/javascript">
//this will move selected items from source list to destination list
function move_list_items(sourceid, destinationid)
{
$("#"+sourceid+" option:selected").appendTo("#"+destinationid);
}
</script>
<!-- include listbox.js -->
<link href="../src/listbox.css" rel="stylesheet">
<script src="../src/listbox.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
html, body {
font-size: 12px;
font-family: sans-serif;
background: #f5f5f5;
}
.cover {
padding: 20px 30px;
border: 1px solid #dedede;
border-radius:4px;
background: #f9f9f9;
box-shadow: 0px 0px 10px #a8a8a8;
/* centering */
position: absolute;
top: 50%;
left: 50%;
margin-top: -180px;
margin-left: -222px;
}
.lbjs { float: left; }
.lbjs:last-of-type { margin-left: 20px; }
</style>
<body>
<div class="cover">
<select id="country" name="country" >
<option>Afghanistan</option>
<option>Albania</option>
<option>Algeria</option>
<option>Andorra</option>
</select>
<input id="moveright" type="button" value=" > " onclick="move_list_items('country','planets');" />
<select id="planets" multiple="multiple" name="planets">
<option>Alderaan</option>
<option>Corellia</option>
<option>Endor</option>
<option>Kashyyyk</option>
</select>
</div><!-- .cover -->
</body>
</html>
$(document).ready(function () {
$("#moveright").click(function(){
$("#country > option:selected").each(function(){
$(this).remove().appendTo("#planets");
});
});
});
Demo:
http://jsfiddle.net/Rc7qP/
Update:
http://jsfiddle.net/fLAy6/1/
Please have a look into the following link it seems working
$("#moveright").on('click' , function(){
alert("test");
var obj = ($("#country option:selected"));
$.each(obj, function(index , item){
$("#planets").append($(this));
});
});
$("#moveleft").on('click' , function(){
alert("test");
var obj = ($("#planets option:selected"));
$.each(obj, function(index , item){
$("#country").append($(this));
});
});

CSS <div> Wrapping error

I have <div> called container which are wrapping couple of <div>s called block and I used a jquery plugin called columnizer to split the block into column.The problem is , I can't seem to make the <div> called container wrap the blocks which are going over the div .I also got picture to demonstrate my problem.
I tried alot of solutions like , removing the container width but it doesn't work because the jquery plugyin called columnizier need a width i think.
My html
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js"></script>
<script type="text/javascript">
$(function(){
$('h1').addClass('dontend');
$('.wide').columnize({
width : 100,
height : 300
});
});
</script>
<script style="display:none" type="text/javascript">var Mint=new Object();Mint.save=function()
{var now=new Date();var debug=false;if(window.location.hash=='#Mint:Debug'){debug=true;};var path='http://welcome.totheinter.net/mint/?record&key=6a56784248357a3735323031363633316663796c526d';path=path.replace(/^https?:/,window.location.protocol);for(var developer in this)
{for(var plugin in this[developer])
{if(this[developer][plugin]&&this[developer][plugin].onsave)
{path+=this[developer][plugin].onsave();};};};path+='&'+now.getTime();if(debug){window.open(path+'&debug&errors','MintLiveDebug'+now.getTime());return;};var ie=/*#cc_on!#*/0;if(!ie&&document.getElementsByTagName&&(document.createElementNS||document.createElement))
{var tag=(document.createElementNS)?document.createElementNS('http://www.w3.org/1999/xhtml','script'):document.createElement('script');tag.type='text/javascript';tag.src=path+'&serve_js';document.getElementsByTagName('head')[0].appendChild(tag);}
else if(document.write)
{document.write('<'+'script type="text/javascript" src="'+path+'&serve_js"><'+'/script>');};};if(!Mint.SI){Mint.SI=new Object();}
Mint.SI.Referrer={onsave:function()
{var encoded=0;if(typeof Mint_SI_DocumentTitle=='undefined'){Mint_SI_DocumentTitle=document.title;}
else{encoded=1;};var referer=(window.decodeURI)?window.decodeURI(document.referrer):document.referrer;var resource=(window.decodeURI)?window.decodeURI(document.URL):document.URL;return '&referer='+escape(referer)+'&resource='+escape(resource)+'&resource_title='+escape(Mint_SI_DocumentTitle)+'&resource_title_encoded='+encoded;}};Mint.save();</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" href="b.css">
<div class="container"> <div class="wide">
<div class="block"></div><br>
<div class="block"></div><br>
<div class="block"></div><br>
</div></div>
My css
.container {
background-color: #ED8713;
height: 300px;
width: 200px;
}
.block {
width: 50px;
height:250px;
background-color: #C31212;
margin: 10px;
margin-top: 5px;
}
Here it is working: http://jsfiddle.net/gRxdF/3/
CSS:
.container {
background-color: #ED8713;
height: 300px;
float: left;
}
.block {
display: inline-block;
height: 250px;
background-color: #C31212;
margin: 10px;
margin-top: 5px;
}
HTML - I removed the <br>tags.

Categories