jqGrid textbox contains jQuery UI autocomplete.
I tried to add button to open combocode below based on Oleg great answer in Add multiple input elements in a custom edit type field .
If dropdown menu is open and jqgrid is scrolled, dropdown menu position does not change.
How to anchor dropdown menu to textbox so that it remais in textbox corner on scroll ?
{"name":"Custtype","edittype":"custom","maxlength":15,
"editoptions": {"custom_element":function(value, options) {
return combobox_element(value, options,'24','Klliik0_nimetus','Klient')}
,"custom_value":function(elem, operation, value) {
return $("input", $(elem)[0]).val();
}
}
}
function combobox_element(value, options, width) {
var elemStr = '<div><input style="width:' + width + 'px" value="' +
value + '"/>' +
'<button type="button" style="height:16px;vertical-align:center" class="ui-icon-triange-1-s" style="margin-left:-1px" tabindex=-1/></div>';
var newel = $(elemStr)[0];
var input = $("input", newel);
input.autocomplete({
source: 'AutoComplete',
position: { collision: 'flip flip' }
}
)
.autocomplete('widget').css('font-size', '12px');
return newel;
}
index.aspx contains style from Fixed positioned search box with Autocomplete suggestions
but dropdown menu does not move with textbox if jqgrid is scrolled vertically.
<style>
.ui-autocomplete
{
max-height: 300px;
overflow-y: auto; /* prevent horizontal scrollbar */
overflow-x: hidden; /* add padding to account for vertical scrollbar */
padding-right: 20px;
z-index: 99999;
position: fixed;
top: 0px;
margin: 20px 0px 0px 0px; /* The top margin defines the offset of textbox */
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete
{
height: 100px;
}
Related
I have a modal image that when clicked, will open full-screen with the text displayed from the alt tag in the image. I grabbed the code off another site so need to change it to add a download link within the modal so when the link is clicked it will download a file. Is this possible in the below code?
Code below:
<img id="myImg1" src="test.png" alt="Hello" width="95" height="146">
<!-- The Modal -->
<script
<div id="myModal1" class="modal">
<span class="close">x</span>
<img class="modal-content" id="img01">
<div id="caption">
<div id="caption1"></div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal1');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg1');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption1");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Any assistance would be much appreciated.
[![<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
Download
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")\[0\];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
When you zoom in AmCharts scroll bar, "Show all" button appears and overlays with link to AmCharts website. Is there a way to force AmCharts link or "Show all" button to be shown in left corner?
Found nothing in docs.
It's possible to hide "Show all" button by setting chart's zoomOutText property to empty string:
var chart = AmCharts.makeChart('chartdiv', {
type: 'serial',
zoomOutText: ''
...
});
and place your own custom button anywhere you wish:
HTML
<div class="container">
<div id="chartdiv"></div>
<button class="show-all-button">Show all</button>
</div>
CSS
.container {
position: relative;
...
}
#chartdiv {
position: relative;
width: 100%;
height: 100%;
}
.show-all-button {
position: absolute;
top: 15px;
left: 15px;
...
}
To make the button working add the following click event handler:
var showAllButton = document.querySelector('.show-all-button');
showAllButton.addEventListener('click', function() {
chart.zoomOut();
});
This approach is useful when you need to add custom controls over your chart.
Indeed, there are no config options to move the "Show all" button.
However, you can set the position of branding link using creditsPosition
I.e.:
AmCharts.makeChart("chartdiv", {
"type": "serial",
"creditsPosition": "bottom-left",
...
});
I would like to achieve the effect where one image is revealed over the other when scrolling the page.
You can see an example on livearealabs.com (new york / seattle). Does anybody know how to create it using CSS3?
Check out this jsfiddle to create the sliding effect.
The trick is to have one div rotated 60 degrees. You position it so that it covers the entire wrapper and the overflow is hidden. Then with javascript you just have to move the slice container either by changing the left property or by changing the translate-X property.
Here is the code:
HTML:
<div class="wrapper">
<div class="bg"></div>
<div class="slice" data-show="true"></div>
</div>
CSS:
.wrapper {
position: relative;
overflow: hidden;
width: 20em;
height: 10em;
}
.bg {
background-color: red;
width: 100%;
height: 100%;
}
.slice {
position: absolute;
top: -12em;
left: -8em;
width: 30em;
height: 30em;
background-color: blue;
-webkit-transform: rotate(-60deg);
}
JS:
var hidden = false;
$('.wrapper').click(function() {
console.log('click');
if (hidden) {
$('.slice').stop().animate({left: '-8em'}, 2000);
hidden = false;
} else {
$('.slice').stop().animate({left: '-34em'}, 2000);
hidden = true;
}
console.log('click end');
});
Also check out this jsfiddle for a similar sliding effect that can be achieved with CSS only.
Have seen that this piece of code could solve my problems but I don't know how or where to apply it to make it work correctly
JScrollPane.setVerticalScrollBarPolicy(VERTICAL_SCROLLBAR_NEVER);
If your aim is to hide the vertical scroll bar then use the following CSS property...
overflow-y: hidden;
In your CSS (RRD.css), you have...
.scroll-pane
{
width: 100%;
height: 670px;
overflow: hidden;
}
Try changing it to...
.scroll-pane
{
width: 100%;
height: 670px;
overflow-y: hidden;
}
More changes
And in your includes/jquery.jscrollpane.css change...
.jspPane
{
position: absolute;
width: 9660px;
}
to...
.jspPane
{
position: absolute;
width: 5880px;
}
This will remove the extended scrolling that is happening. And make sure your content-holder width is 5880px to match the jspPane scrolling ...
<div id="content-holder" style="width:5880px;">
The vertical scrollbar will not appear as long the content-holder div width is not less than the width of the content inside it. Think all your images in the content-holder div adds up to 5680px + you need to add the padding you apply as well.
I am working on autocompleter box based on Scriptaculous Ajax.Autocompleter.
It works in general, but I need to have list of choices wider (see image -- green line -- 320px) then input box (see image -- red line -- 155px).
My first try was to set various width with CSS classes (like above), but it didn't work -- list of choices became as wide as input box.
According to Firebug width defined by my CSS class was overwritten by width set by element.style CSS class, which seems to be defined by Ajax.Autocompleter.
My second try was to set width for list of choices after creating Ajax.Autocompleter
$("isearch_choices").setStyle({width: "320px"});
but it didn't work too :(.
No more ideas :(.
How to set different width for list of choices for Scriptaculous Ajax.Autocompleter?
Below there is complete example of code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>
<style>
input.iSearchInput {
width: 155px;
height: 26px;
margin-top: 7px;
line-height: 20px;
}
div.iSearchChoices {
position:absolute;
background-color:white;
border:1px solid #888;
margin:0;
padding:0;
width: 320px;
}
div.iSearchChoices ul {
list-style-type:none;
margin:0;
padding:0;
}
div.iSearchChoices ul li.selected { background-color: #ffb;}
div.iSearchChoices ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
height:32px;
cursor:pointer;
border-bottom: 1px dotted #929292;
}
</style>
</head>
<body>
<input type="text" maxlength="255" class="input iSearchInput" name="isearch_value" id="isearch" value="Search" onfocus="this.select()">
<br>
<div id='isearch_choices' class='iSearchChoices'></div>
</script>
</body>
<script>
function iSearchGetSelectedId(text, li) {
console.log([text, li.innerHTML].join("\n"));
document.location.href = li.getAttribute("url");
}
document.observe('dom:loaded', function() {
try {
new Ajax.Autocompleter("isearch", "isearch_choices", "/url", {
paramName: "phrase",
minChars: 1,
afterUpdateElement : iSearchGetSelectedId
});
}
catch (ex) {
alert(ex);
}
$("isearch_choices").setStyle({width: "320px"});
});
</script>
</html>
And link to image with its result.
The width is reset in the autocompletion list automatically by the Base.Autocompleter implementation. The Base.Autocompleter will set the list to be the same width as the search input field. There are a couple of ways to go around this:
1. Patch Autocompleter.Base by yourself
You can patch the Autocompleter.Base script by yourself as described by this post. For script.aculo.us version 1.8.1 in controls.js at line 68 you have the following:
Position.clone(element, update, {
setHeight: false,
offsetTop: element.offsetHeight
});
Add a setWidth: false into that options object like this:
Position.clone(element, update, {
setWidth: false,
setHeight: false,
offsetTop: element.offsetHeight
});
2. Extend very your Autocompleter
The example below is for extending the Ajax.Autocompleter. The idea is to replace the onShow function that the base class will call in order to show the autocompleter and resize it with Position.clone().
/**
* Extension of Ajax.Autocompleter that disables width reset.
* #class
*/
var MyAutocompleter = Class.create(Ajax.Autocompleter, {
/**
* #constructor
* #param $super reference to the base class (provided by prototype.js)
* #param id_for_search the id for the search input element
* #param id_for_list the id for autocompletion list element
* #param url the ajax url to be used
*/
initialize: function($super, id_for_search, id_for_list, url) {
$super(id_for_search, id_for_list, url, {
onShow: function(element, update) {
if(!update.style.position || update.style.position=='absolute') {
update.style.position = 'absolute';
Position.clone(element, update, {
setHeight: false,
setWidth: false,
offsetTop: element.offsetHeight
});
}
Effect.Appear(update,{duration:0.15});
}
});
}
});
And you create it as usual with new just as with the other Autocompleter classes.
document.observe("dom:loaded", function() {
new MyAutocompleter('search', 'autoList', 'url/for/ajaxcall');
});
The benefit of the latter is that you can update the script.aculo.us version without repatching the files, and you can continue to overload and extend the Autocompleter to your liking (given you know how the base class behaves).
Seems to be fixed. I modified CSS stylesheets and seems (visually) to work:
Removed border from DIV element and moved it UL element.
Add width for UL element.
Here are my changes:
div.iSearchChoices {
position:absolute;
background-color:white;
/* border:1px solid #888; */
margin:0;
padding:0;
/* width: 320px; */
}
div.iSearchChoices ul {
list-style-type:none;
margin:0;
padding:0;
/* moved from div.iSearchChoices class */
border:1px solid #888;
width: 320px;
}