I have Select menu. Each option switches the image displayed. I'm asking how do I translate over the each unique width and height linked to each options onto the actual displayed image. I understand the width and height are baseless as far as they're effect on an option tag but I guess Im saying is that I want a values associated and bonded to each option that come into play and effect the image when the option they are attached to is selected. Something like adding a variable like
var c = a.getElementByTagName('class').getAttributeNode('width').value;??
I really dont know. How do I associate values with the options? Preferably there is a way without attaching a new class to every option. My code so far can only change the src.
I hope you understand the question. I explained it the best I can. Thanks for any help.
<!DOCTYPE html>
<html>
<body>
<select id='select1'>
<option value='pic_unavail' selected width='300' height='300'>-- Choose --</option>
<outgroup label="Animals">
<option value='pic_monkey' id='monkey' width='50' height='100'>Monkey</option>
<option value="pic_cat" id='cat' width='100' height='200'>Cat</option>
<option value="pic_dog" id='dog' width='200' height='250'>Dog</option>
</outgroup>
</select>
<img id="pic">
<script type="text/javascript">
document.getElementById("select1").onchange = select;
var a = document.getElementById('select1')
var b = document.getElementById('pic');
function select() {
b.src = this.value;
return
}
</script>
</body>
</html>
Use:
this.options[this.selectedIndex].getAttribute('width');
this.options[this.selectedIndex].getAttribute('height');
This should give you the selected option's width and height just as you currently have them embedded in each tag. Hope this helps!
Related
I'm trying to add a 'select' (dropdown) tag in my handsontable custom header. The problem is, when I click on the dropdown, it does not stay open and I cannot select a different option.
The code looks like this:
colHeaders: function (col) {
var txt;
switch (col) {
case 0:
txt = `<select class='checker'>
<option value="optionone">Option One</option>
<option value="optiontwo">Option Two</option>
<option value="optionthree">Option Three</option>
</select>`;
return txt;
}
}
Here's a jsfiddle for this (I used the official example for custom header renderers, except i replaced the checkbox with a select tag):
https://jsfiddle.net/kjcm2y8f/
If anyone has an idea on how to fix this, I'd appreciate it.
Updating your Handsontable version will help solve the problem. In your jsfiddle, replace your css with this:
<script src="https://cdn.jsdelivr.net/npm/handsontable#7.0.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable#7.0.1/dist/handsontable.full.min.css">
I have a issue with html2canvas showing the screenshot in a canvas div.
Actually the picture will be show in
<div id="content"> </div>
But i like to show the code in my canvas
<div id="content">
<canvas id="myimage"> HERE I LIKE TO SHOW THE IMAGE</canvas>
</div>
In the inline javascript i can change the div container-id, but i dont know how to change the code to get the image in the canvas element.
<script type="text/javascript">var date=new Date();var message,timeoutTimer,timer;var proxyUrl="http://urlcanvas.appspot.com";function addRow(a,c,d){var b=$("<tr />").appendTo($(a));b.append($("<td />").css("font-weight","bold").text(c)).append($("<td />").text(d))}function throwMessage(b,a){window.clearTimeout(timeoutTimer);timeoutTimer=window.setTimeout(function(){message.fadeOut(function(){message.remove()})},a||2000);$(message).remove();message=$("<div />").html(b).css({margin:0,padding:10,background:"#000",opacity:0.7,position:"fixed",top:10,right:10,fontFamily:"Tahoma",color:"#fff",fontSize:12,borderRadius:12,width:"auto",height:"auto",textAlign:"center",textDecoration:"none"}).hide().fadeIn().appendTo("body")}$(function(){$("#recommended a").click(function(c){c.preventDefault();$("#url").val(this.href);$("button").click()});var a,b;$('input[type="button"]').click(function(){$(a.contentWindow).unbind("load");$(a).contents().find("body").html2canvas({canvasHeight:b.body.scrollHeight,canvasWidth:b.body.scrollWidth,logging:true})});$("#getscreenshot").click(function(d){d.preventDefault();$(this).prop("disabled",true);var c=$("#url").val();$("#contentx").append($("<img />").attr("src","loading.gif").css("margin-top",40));var f=document.createElement("a");f.href=c;$.ajax({data:{xhr2:false,url:f.href},url:proxyUrl,dataType:"jsonp",success:function(e){a=document.createElement("iframe");$(a).css({visibility:"hidden"}).width($(window).width()).height($(window).height());$("#contentx").append(a);b=a.contentWindow.document;b.open();$(a.contentWindow).load(function(){var g=$(a).contents().find("body"),h={onrendered:function(j){$("#contentx").empty().append(j);$("#getscreenshot").prop("disabled",false);$("base").attr("href","")},allowTaint:true,taintTest:false,flashcanvas:"src/flashcanvas.min.js"},i=html2canvas(g,h)});$("base").attr("href",f.protocol+"//"+f.hostname+"/"+f.pathname);e=e.replace("<head>","<head><base href='"+f.protocol+"//"+f.hostname+"/"+f.pathname+"' />");if($("#disablejs").prop("checked")){e=e.replace(/\<script/gi,"<!--<script");e=e.replace(/\<\/script\>/gi,"<\/script>-->")}b.write(e);b.close()}})})});</script>
Here is a good reference create screenshot of webpage using html2canvas (unable to initialize properly) Hope it will help.
If i understood well you need to append the canvas like this:
html2canvas(document.getElementById("content"), {
onrendered: function(canvas) {
document.getElementById("content").appendChild(canvas);
}
});
I'm trying to implement calling colorbox items from a dropdown menu. Using this example, http://www.jacklmoore.com/colorbox/example4/, how could I simply call these links from a drop down menu? It seems to work fine in every browser except IE without any additional scripting. I'm sure it's going to be simple fix for anyone with true coding skills. Can anyone help me out?
I found something similar after a quick google search
I can't say whether or not this works, but why don't you give it a shot working this code into your jsfiddle, and I'll see if I can help you debug any issues that arise.
from: https://groups.google.com/forum/?fromgroups=#!topic/colorbox/OM85IPMoyP4
<select name="howheard" id="howheard" class="validate[required]">
<option value="http://example1.com">Example 1</option>
<option value="http://example2.com">Example 2</option>
<option value="http://example3.com">Example 3</option>
</select>
EDIT: updadate colorbox() init:
<script>
$(document).ready(function(){
$("#howheard").change(function () {
var thisHref = $(this).val();
$.colorbox({iframe:true, width:"80%", height:"80%", href: thisHref});
});
});
</script>
MVC/Razor/Javascript newbie question:
I have a MVC3/Razor form where the use can select a single product from a drop down list.
<div class="editor-label">
Product
</div>
<div class="editor-field">
#Html.DropDownList("ProductID", (IEnumerable<SelectListItem>)ViewBag.Products, "--Select One--")
#Html.ValidationMessageFor(model => model.ProductID)
</div>
What I then want is to display the price of the selected product on a label just below the drop down list (model property name is Amount).
This should be pretty easy, but I am pretty new at Razor, and know almost nothing about Javascript, so I would appreciate any verbose explanations of how do do it, and how it all hangs together.
Add a div/span under the Dropdown .
#Html.DropDownList("ProductID", (IEnumerable<SelectListItem>)ViewBag.Products, "--Select One--")
<div id="itemPrice"></div>
and in your Script, make an ajax call to one of your controller action where you return the price.
$(function(){
$("#ProductId").change(function(){
var val=$(this).val();
$("#itemPrice").load("#Url.Action("GetPrice","Product")", { itemId : val });
});
});
and have a controller action like this in your Product controller
public string GetPrice(int itemId)
{
decimal itemPrice=0.0M;
//using the Id, get the price of the product from your data layer and set that to itemPrice variable.
return itemPrice.ToString();
}
That is it ! Make sure you have jQuery loaded in your page and this will work fine.
EDIT : Include this line in your page to load jQuery library ( If it is not already loaded),
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
The Amount isn't available to your view when the user selects a product (remember the page is rendered on the server, but actually executes on the client; your model isn't available in the page on the client-side). So you would either have to render in a JavaScript array that contains a lookup of the amount based on the product which gets passed down to the client (so it's available via client-side JavaScript), or you would have to make a callback to the server to retrieve this information.
I would use jQuery to do this.
Here's a simple example of what the jQuery/Javascript code might look like if you used an array.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
// This code can easily be built up server side as a string, then
// embedded here using #Html.Raw(Model.NameOfPropertyWithString)
var list = new Array();
list[0] = "";
list[1] = "$1.00";
list[2] = "$1.25";
$("#ProductID").change(displayAmount).keypress(displayAmount);
function displayAmount() {
var amount = list[($(this).prop('selectedIndex'))];
$("#amount").html(amount);
}
});
</script>
<select id="ProductID" name="ProductID">
<option value="" selected>-- Select --</option>
<option value="1">First</option>
<option value="2">Second</option>
</select>
<div id="amount"></div>
You'll want to spend some time looking at the docs for jQuery. You'll end up using it quite a bit. The code basically "selects" the dropdown and attaches handlers to the change and keypress events. When they fire, it calls the displayAmount function. displayAmount() retrieves the selected index, then grabs the value out of the list. Finally it sets the HTML to the amount retrieved.
Instead of the local array, you could call your controller. You would create an action (method) on your controller that returned the value as a JsonResult. You would do a callback using jquery.ajax(). Do some searching here and the jQuery site, I'm sure you'll find a ton of examples on how to do this.
--Select--
admin/order/orderlist/paid" style="color:#000000; text-decoration:none">Paid
admin/order/orderlist/successfully" style="color:#000000; text-decoration:none">Successfully
?>
Maybe you are looking for the :selected Selector in jQuery: http://api.jquery.com/selected-selector/ ?
To put it simple, you could do some JS similar to this:
$("#mySelect").change(function () {
var selected = $(this + "option:selected").text();
if(selected == "someValue")
window.location = "someUrl";
});
... that is, when someone selects an item, the text of the selected item is grapped using the jQuery selector. Knowing that value you could then decide to which URL you want to sent the user - in this case, by using window.location.
The corresponding HTML could look like this:
<select id="mySelect">
<option>someValue</option>
<option>someOtherValue</option>
</select>