I have written some code to convert html in a bootstrap modal to image in jpeg format.
It is working fine but in the image it is showing some scroll bar(s). In this code I didn't include any scrollbar.
How to resolve this problem. can any one please help me. example image here I have included one image, I am getting scrollbar like this when I click on the download button.
$(document).on("click", "#jpgfrmt", function() {
domtoimage.toJpeg(document.getElementById('download'), {
quality: 0.95
})
.then(function(dataUrl) {
var link = document.createElement('a');
link.download = 'astDetails.jpeg';
link.href = dataUrl;
link.click();
});
});
#download {
background: #fff;
color: #000;
width: auto;
height: auto
}
#buttons {
margin: 0 auto;
display: inline;
}
#jpgfrmt {
float: right;
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<div id="content" class="content">
<div id="buttons">
<div class="action_btn">
<a href="javascript:;" id="jpgfrmt" class="btn btn-xs btn-warning m-b-10">
<i class="fa fa-download m-r-5"></i> Download
</a>
</div>
</div>
<div class="row" id="download">
<div class="col-md-8">
<div class="table-responsive">
<table class="table">
<tr>
<td style="border:none;">
<table class="table">
<tr>
<td class="field highlight" width="25%" style="border:none;">Name:</td>
<td width="75%" style="border:none;">
Name
</td>
</tr>
<tr>
<td class="field" width="25%" style="border:none;">Description:</td>
<td width="75%" style="border:none;">
Description
</td>
</tr>
<tr>
<td class="field" width="25%" style="border:none;">Serial No:</td>
<td width="75%" style="border:none;">
Serial Number
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Related
I have a table and 10 rows When I copy this image src. It copied the last src
HTML
<table class="table table-striped">
<tbody>
#foreach($medias as $media)
<tr>
<td class="align-middle">{{ $media->id }}</td>
<td class="align-middle"><img src="{{ asset('storage/'.$media->image) }}" class="image" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="{{ route('admin.medias.destroy', $media->id) }}" method="post">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">del</button>
</form>
</td>
<td class="align-middle"><a onclick="copy(this)" class="btn btn-sm btn-info">copy</a></td>
</tr>
#endforeach
</tbody>
</table>
JS
<script>
function copy () {
navigator.clipboard.writeText(document.getElementsByClassName('image').src);
}
</script>
I copied undefined.
Note: This code has no errors in the output.
You cannot repeat Id inside DOM. So you can set up id dynamically, btw you need to pas the element to your copy().
Try the next code and let me know if it is working. I didn't test it, but it should work
Blade
<table class="table table-striped">
<tbody>
#foreach($medias as $media)
<tr>
<td class="align-middle">{{ $media->id }}</td>
<td class="align-middle"><img src="{{ asset('storage/'.$media->image) }}" id="image-{{$media->id}}" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="{{ route('admin.medias.destroy', $media->id) }}" method="post">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">del</button>
</form>
</td>
<td class="align-middle"><a onclick="copy('image-{{$media->id}}')" class="btn btn-sm btn-info">copy</a></td>
</tr>
#endforeach
</tbody>
</table>
JS
<script>
function copy (element) {
navigator.clipboard.writeText(document.getElementsById(element).src);
}
</script>
Example A is more true to the OP layout. Example B was started before the question was updated. One important thing you should remember is that you cannot have any identical #ids they must be unique, so img#image is img.image in the examples.
Details are commented in both examples
Example A
// Bind the <tbody> to the click event
document.querySelector('tbody').onclick = copyPath;
function copyPath(e) {
// Stop link from jumping
e.preventDefault();
// Reference the link user clicked
const clk = e.target;
/*
If the tag user clicked has .copy class...
...find the closest <tr> from clk...
...then find .image in <tr>...
...get .image src value and add it to clipboard
*/
if (clk.matches('.copy')) {
const image = clk.closest('tr').querySelector('.image');
navigator.clipboard.writeText(image.src);
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<main class='container'>
<section class='row'>
<div class='col'>
<table class="table table-striped">
<tbody>
<tr>
<td class="align-middle"></td>
<td class="align-middle"><img class='image' src="https://placem.at/places?w=100&h=50&random=1&txt=1&txtclr=fc0" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="about:blank" method="post">
<button class="delete btn btn-danger btn-sm">Delete</button>
</form>
</td>
<td class="align-middle">Copy Image Path</td>
</tr>
<tr>
<td class="align-middle"></td>
<td class="align-middle"><img class='image' src="https://placem.at/places?w=100&h=50&random=2&txt=2&txtclr=fc0" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="about:blank" method="post">
<button class="delete btn btn-danger btn-sm">Delete</button>
</form>
</td>
<td class="align-middle">Copy Image Path</td>
</tr>
<tr>
<td class="align-middle"></td>
<td class="align-middle"><img class='image' src="https://placem.at/places?w=100&h=50&random=3&txt=3&txtclr=fc0" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="about:blank" method="post">
<button class="delete btn btn-danger btn-sm">Delete</button>
</form>
</td>
<td class="align-middle">Copy Image Path</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class='row'>
<div class='col'>
<textarea class='form-control' rows='3' cols='50' placeholder='Paste Here'></textarea>
</div>
</section>
</main>
Example B
// Collect <figure> into an array
const frames = [...document.querySelectorAll('figure')];
// On each <figure>...
frames.forEach(fig => {
// Get the src of <img>
let path = fig.firstElementChild.src;
// Reference the <a>
let link = fig.lastElementChild.firstElementChild;
// Add data-src attribute with the value of path to the link
link.setAttribute('data-src', path);
});
// Bind the click event to <section>
document.querySelector('section').onclick = copyPath;
function copyPath(e) {
// Stop link from jumping
e.preventDefault();
// Reference the link user clicked
const clk = e.target;
/*
If the tag clicked has attribute [data-src]...
...add the link's data-src value to clipboard
*/
if (clk.hasAttribute('data-src')) {
navigator.clipboard.writeText(clk.dataset.src);
}
}
section {
display: flex;
justify-content: center;
align-items: center;
margin: 10px
}
figure {
margin: 0
}
figcaption {
text-align: center;
}
<h3>Click a link then right click + <u>P</u>aste or <kbd>Ctrl/⌘</kbd> + <kbd>v</kbd> to the <code><textarea></code> below:</h3>
<section>
<figure>
<img src='https://placem.at/places?w=160&h=90&random=1&txt=1&txtclr=fc0'>
<figcaption><a href='!#'>Image Source</a></figcaption>
</figure>
<figure>
<img src='https://placem.at/places?w=160&h=90&random=2&txt=2&txtclr=fc0'>
<figcaption><a href='!#'>Image Source</a></figcaption>
</figure>
<figure>
<img src='https://placem.at/places?w=160&h=90&random=3&txt=3&txtclr=fc0'>
<figcaption><a href='!#'>Image Source</a></figcaption>
</figure>
</section>
<textarea rows='3' cols='65' placeholder='Paste Here'></textarea>
$(document).ready(function() {
$("#t1").hide(); // hide table by default
$('#sp1').on('click', function() {
$("#t1").show();
});
$('#close').on('click', function() {
$("#t1").hide();
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel="stylesheet"/>
<div class="col-md-12 col-12 table-responsive">
<div class="form-group">
<div class="col-md-12" style="padding: 10px !important;" align="center">
<div class="form-group">Main heading</div>
</div>
<table class="table table-hover">
<thead class="lbbg3">
<tr>
<td style="width: 800px;">Sub heading 1</td>
<td>Sub heading 2</td>
</tr>
</thead>
<tbody>
<tr>
<th style="background: #eef7fc; text-align: left;" colspan="2">
<button class="table-plus-btn table1" id="sp1"><i class="fa fa-plus"></i></button><button class="table-minus-btn" id="close"><i class="fa fa-minus"></i></button> Child Heading
</th>
</tr>
<tr>
<td colspan="2">
<div class="table1shw">
<table class="table1 table-hover" id="t1">
<tr>
<td style="text-align: left; width: 800px;">
Row 1
</td>
<td style="text-align: center;">
<div class="custom-control custom-radio radio-table">
<a href="#doc">
<input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn" />
<label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()"></label>
</a>
</div>
</td>
</tr>
<tr>
<td style="text-align: left; width: 800px;">
Row 2
</td>
<td style="text-align: center;">
<div class="custom-control custom-radio radio-table">
<input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy" />
<label class="custom-control-label" for="customRadio51" style="cursor: pointer;"></label>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Hi, Currently i am using two button Plus and minus, Just i need to display at time one button. when the plus button click the hidden table will get displayed and minus button should appear and plus button is hide. same for the minus button too. more we can say toggle button. also required can we display at time only one hidden table.
All the code and table currently working fine i used this method for accordion but not used for table.
also you can write it a bit shorter
$(document).ready(function() {
$("#t1, #close").hide();
$('#sp1, #close').on('click', function() {
$('#t1, .table-plus-btn, .table-minus-btn').toggle();
});
});
You can hide / show buttons based on the click. I added the function toggleButtons(show) where show is equal to if you want to show or hide the row.
function toggleButtons(show) {
if (show) {
$("#sp1").hide();
$("#close").show();
} else {
$("#sp1").show();
$("#close").hide();
}
}
$(document).ready(function() {
$("#t1").hide(); // hide table by default
$('#sp1').on('click', function() {
toggleButtons(true)
$("#t1").show();
});
$('#close').on('click', function() {
toggleButtons(false)
$("#t1").hide();
});
function toggleButtons(show) {
if (show) {
$("#sp1").hide();
$("#close").show();
} else {
$("#sp1").show();
$("#close").hide();
}
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel="stylesheet"/>
<div class="col-md-12 col-12 table-responsive">
<div class="form-group">
<div class="col-md-12" style="padding: 10px !important;" align="center">
<div class="form-group">Main heading</div>
</div>
<table class="table table-hover">
<thead class="lbbg3">
<tr>
<td style="width: 800px;">Sub heading 1</td>
<td>Sub heading 2</td>
</tr>
</thead>
<tbody>
<tr>
<th style="background: #eef7fc; text-align: left;" colspan="2">
<button class="table-plus-btn table1" id="sp1"><i class="fa fa-plus"></i></button>
<button class="table-minus-btn" id="close" style="display: none"><i class="fa fa-minus"></i></button>
Child Heading
</th>
</tr>
<tr>
<td colspan="2">
<div class="table1shw">
<table class="table1 table-hover" id="t1">
<tr>
<td style="text-align: left; width: 800px;">
Row 1
</td>
<td style="text-align: center;">
<div class="custom-control custom-radio radio-table">
<a href="#doc">
<input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn" />
<label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()"></label>
</a>
</div>
</td>
</tr>
<tr>
<td style="text-align: left; width: 800px;">
Row 2
</td>
<td style="text-align: center;">
<div class="custom-control custom-radio radio-table">
<input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy" />
<label class="custom-control-label" for="customRadio51" style="cursor: pointer;"></label>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
If I am not mistaken this is what you want to do:
First - Display the plus button, and hide the table
Second- When plus button is clicked display the table, hide the plus button, and show the minus button
Third- When the minus button is clicked, hide the minus button, show the plus button, and hide the table.
It seems that you're code isn't working BECAUSE you are not hiding/displaying the buttons at the appropriate time. I am also assuming only one button should be shown at a time?
$(document).ready(function() {
$("#t1").hide(); // hide table by default
$("#close").hide(); //hide the minus button as well if you only want one button to display at a time
$('#sp1').on('click', function() { //when plus button is clicked
$("#t1").show();
$("#sp1").hide(); //you need to hide the plus button now
$("#close").show(); //and then display the minus button
});
$('#close').on('click', function() {
$("#t1").hide(); //hide table
$("#close").hide(); //hide minus btn
$("#sp1").show(); //show plus button
});
});
Hello im working on a game fan guide page but now I will not go any further and search for help.
I need a way to get the next or/and previous img on click a previous arrow and next arrow.
All this is new for me and i have test many but nothing have work, i hope anyone can help me out.
now i have see my html have make issus but i have fix and now i can post my html.
I have the CSS style and HTML for a better view split but in my html it is alle in one and a meta for viewport.
edit: sry, but i have make thinking errors. it is not enough to change the pic i have to change the wohle div content.
explane on click next have to change div id="card1" class="card_content" to div id="card2" class="card_content"
a img {
border:none;
}
.card_overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
}
.card_content {
display: none;
position: absolute;
height:600px;
width:305px;
top: 50%;
left: 50%;
margin-top: -258px;
margin-left: -156px;
padding: 6px;
background-color: black;
z-index: 1002;
overflow: auto;
}
#card_icons {
width:299px;
border:0;
}
.card_case {
background-image: url(http://file2.npage.de/014720/85/bilder/case.png);
background-repeat: no-repeat;
height:435px;
width:299px;
border:0;
}
.switch_card {
position:relative;
z-index:1003;
margin-top:-235px;
margin-left:-5px;
}
#back_to {
position:relative;
z-index:1003;
margin-top:203px;
margin-left:0px;
}
<table>
<tr>
<td>
<img src="http://file2.npage.de/014720/85/bilder/grabwaechters_vasall.png" title="Grabwächters Vasall" />
<img src="http://file2.npage.de/014720/85/bilder/des_kaenguru.png" title="Grabwächters Vasall" />
</td>
</tr>
</table>
<div id="card1" class="card_content">
<table id="card_icons">
<tr>
<td align="left" width="80"><img src="http://file2.npage.de/014720/85/bilder/stapel.png" height="17" width="24"><font color="white"> 1/20</font></td>
<td align="left" width="60"><img src="http://file2.npage.de/014720/85/bilder/ex.png" height="17" width="14"><font color="white"> 0/ 2</font></td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/ur.png"></td>
</tr>
</table>
<table class="card_case">
<tr>
<td valign="middle" align="center"><img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png"></td>
</tr>
</table>
<div class="switch_card">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="http://file2.npage.de/014720/85/bilder/links2.png"></td>
<td> </td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/rechts2.png"></td>
</tr>
</table>
</div>
<div id="back_to"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></div>
</div>
<div id="card2" class="card_content">
<table id="card_icons">
<tr>
<td align="left" width="80"><img src="http://file2.npage.de/014720/85/bilder/stapel.png" height="17" width="24"><font color="white"> 1/20</font></td>
<td align="left" width="60"><img src="http://file2.npage.de/014720/85/bilder/ex.png" height="17" width="14"><font color="white"> 0/ 2</font></td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/ur.png"></td>
</tr>
</table>
<table class="card_case">
<tr>
<td valign="middle" align="center"><img src="http://file2.npage.de/014720/85/bilder/big_des_kaenguru.png">
</td>
</tr>
</table>
<div class="switch_card">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="http://file2.npage.de/014720/85/bilder/links2.png"></td>
<td> </td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/rechts2.png"></td>
</tr>
</table>
</div>
<div id="back_to"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></div>
</div>
<div id="fade" class="card_overlay"></div>
The code below may help you.
// index.html
<img src="01.png" id="pic">
// script.js
document.getElementById("pic").setAttribute("src", "02.png")
Got it done with
<a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='none';document.getElementById('fade').style.display='none';document.getElementById('card2').style.display='block';document.getElementById('fade').style.display='block'" unselectable="off">
But how do i make the javascript: void with a script.js
http://www.tweeturrep.com.s3-website-us-east-1.amazonaws.com/index.html
for some reason when i added style to the nav bar at the top, the links started to only work sometimes. for example, u can't click to enter your zip code until u open and close the votes modal. also if u mouseover the videos link it'll change to the pointer then back and u can't click. idk whats going on but i think it's something to do with bootstrap stuff
<div class="content" position="absolute">
<table position="absolute">
<tr>
<td class="navOPtion">
<img class ="navImage" src="navicon.png">
</td>
<td class="navOPtion" id="hideNav5">
<a style="color:white" href="index.html" id="home">home</a>
</td>
<td class="navOPtion" id="hideNav1">
<a style="color:white" href="videos.html" id="videos" >videos</a>
</td>
<td class="navOPtion" id="hideNav">
<a style="color:white" href="resume.html" target="blank" id="resume">resume</a>
</td>
<td class="navOPtion" id="hideNav2">
<a style="color:white" data-toggle="modal" data-target="#myModal1">
about
</a>
</td>
<td class="navOPtion" id="hideNav3">
<a style="color:white" href="blog.html">blog</a>
</td>
<td class="navOPtion" id="hideNav4">
<a style="color:white" data-toggle="modal" data-target="#myModal">
votes
</a>
</td>
</tr>
<tr>
<td class="title" colspan="7">
tweetUrRep
</td>
</tr>
<tr>
<td class="search" colspan="7">
<form id="find_overlords" align="center">
<form action="" id="find_overlords" type="post">
<input type="text" id="user_Zip" name="zip" placeholder="Zip code" style="width:225px; height:75px;
font-size:20pt" class="input33"></input>
<input type="image" src="search-13-128.png" name="saveForm" class="smallSearchIcon" id="saveForm" >
<br>
<input type="image" src="search-13-128.png" name="saveForm" class="searchIcon" id="saveForm" >
</form>
</td>
</tr>
</table>
the css:
table{
position:static;
margin:auto auto auto auto;
color:white;
width:100%;
}
.navImage {
height: 50px;
width: 75px;
cursor: pointer;
}
.navOPtion{
width:10%;
}
#hideNav{
display:none;
font-size: 30px;
}
#hideNav2{
display:none;
font-size: 30px;
}
#hideNav3{
display:none;
font-size: 30px;
}
#hideNav4{
display:none;
font-size: 30px;
color:white;
}
#hideNav5{
display:none;
font-size: 30px;
color:white;
}
#hideNav1{
display:none;
font-size: 30px;
color:white;
}
the javascript to display the hideNavs:
$(document).ready(function(){
$('.navImage').click(function(){
$('#hideNav').slideToggle('fast');
$('#hideNav1').slideToggle('fast');
$('#hideNav2').slideToggle('fast');
$('#hideNav3').slideToggle('fast');
$('#hideNav4').slideToggle('fast');
$('#hideNav5').slideToggle('fast');
});
});
i have a problem with jquery mobile.
here is teh jsfiddle: http://jsfiddle.net/Gc7mR/3/
First i have a Panel with some Buttons, The importan Button is the button with id=define)!
<div data-role=header data-position=fixed>
<div data-role=navbar>
<ul>
<li><a href=#define data-role=button data-icon=edit
data-inline="true" data-rel="popup" id="define"
data-position-to="#map_canvas">Define</a></li>
<li><a href=#compose data-role=button data-icon=gear
data-inline="true" data-rel="popup" data-transition="slidedown"
data-position-to="#map_canvas">Compose</a></li>
<li><a href=#search data-role=button data-icon=search
data-inline="true" id="search">Search</a></li>
</ul>
</div>
</div>
Now i created 3 Popups(one of them is shown below). Further i have a variable called scenario, which can change the states between restaurants,landmarks, and movies. My goal is if the Button with the id 'define' is clicked, the corresponding popup to the actual state of teh scenario variable should be opened(e.g. if scenario="landmarks" the popup with the id landmarks should open).
<div data-role="popup" id="defineLandmarks"
style="width: 600px; height: 750px;">
<div style="padding: 20px;">
<div align="center">
<b>please define options for the landmark scenario</b>
</div>
<div data-role="controlgroup" data-type="horizontal">
<table>
<tr>
<td style="width: 20%;">wiki abstract</td>
<td style="width: 450px;; float: right"><input type="text"
name="wiki_abstract" id="wiki_abstract" value=""
data-clear-btn="false"></td>
</tr>
<tr>
<td style="width: 20%;">wiki text</td>
<td style="width: 450px; float: right"><input type="text"
name="wiki_text" id="wiki_text" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 1</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords1" id="keywords1" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 2</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords2" id="keywords2" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 3</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords3" id="keywords3" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 4</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords4" id="keywords4" value="" data-clear-btn="false">
</td>
</tr>
</table>
<form>
<div data-role="controlgroup" data-type="horizontal"
align="center">
Reset Apply
</div>
</form>
</div>
</div>
</div>
I try to open the poup like this but it does not work:
$("#define").click(function() {
var s= getScenario();
if(s=='restaurant'){
$('#defineRestaurants').popup('open');
}
else if(s=='movies'){
$('#defineMovies').popup('open');
}
else if(s=='landmarks'){
$('#defineLandmarks').popup('open');
}else{
alert("Please choose a scenario");
}
});
Look at something like
$(createToggleHandler("#check", "#most", "#most"));
function createToggleHandler(id, target, scroll){
return function(){
$(id).click(createToggleClickHandler(target, scroll));
}
}
function createToggleClickHandler(target, scroll){
return function(){
var x = $(target);
x.toggle(500);
$("html, body").animate({ scrollTop: $(scroll).offset().top }, 1000);
}
}