Is it possible to add kendo uploader inside kendo ListView?
<script type="text/x-kendo-tmpl" id="templateMessage">
<div class="Row" style="padding: 2px 2px 2px 2px !important;">
<div style="width: 15%; float: #_Layout.Align; padding-left: 2px;" class="gridText">
#:CheckList#
</div>
<div style="width: 50%; float: #_Layout.Align; padding-left: 2px;" class="gridText">
#(Html.Kendo().Upload()
.Name("file")
.Async(a => a
.Save("SavePic", "Home")
.Remove("RemovePic", "Home")
.AutoUpload(true))
.Multiple(false)
)
</div>
</div>
</script>
Few points that you need to cover:
all the ToClientTemplate extensions when you position widget inside
a client template.
escape the sharp symbols if you have used any inside your widget declaration:
function(e) {
e.data = { id: $("\#Id").val() };
}
I think it's possible. Just have to always remember calling the ToClientTemplate() method when using kendo widgets in a client template.
In this case:
#(Html.Kendo().Upload()
.Name("file")
.Async(a => a
.Save("SavePic", "Home")
.Remove("RemovePic", "Home")
.AutoUpload(true))
.Multiple(false)
.toClientTemplate()
)
UPDATED:
You may escape use "#" in JavaScript strings using "\\#" and in HTML script templates using "\#".
Related
I would like to style the inner class which is inside the custom angular component
<div class="outer">
<custom-component>
<div class="inner">
</div>
</custom-component>
<div>
css:
Following style is not working.
.outer {
custom-component > .inner {
border: solid 1px orange;
}
}
I am trying to implement a horizontal scroll bar to display images , but the width of the wrapper (scroll-container) container is overflowing. I also need to use FlexBox grid to make it responsive for different screen sizes.
Structure for HTML & SCSS is as given below. The container must be inside a mat-tab-group (Angular Material).
div 'item' will contain multiple items.
I am running it on chrome and have checked the inspector, apparently the mat-tab-body-wrapper display: flex property is causing this issue.
Is there any work around for this issue?
HTML
<mat-tab-group>
<mat-tab label="First">
<div class='row scroll-container'>
<div class='col-xs-5 col-sm-8 col-md-9 col-lg-12'>
<div class='horizontal-slider'>
<div class='slider-container'>
<div class='item'>
<img src='' alt=''>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
SCSS
.scroll-container {
margin: 8px 0 0 0;
.horizontal-slider {
display: flex;
overflow-y: hidden;
max-width: inherit;
overflow-x: scroll;
box-sizing: border-box;
.slider-container {
.item {
display: flex;
margin-right: 8px;
img {
width: 124px;
height: 124px;
}
}
}
}
}
The most effective solution would be as shown below. Alongside the flex-nowrap you need to set the overflow attribute to prevent the whole page expanding.
With overflow property:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<h6>Bootstrap 4 horizontally scrollable card groups</h6>
<div class="d-flex flex-row flex-nowrap overflow-auto">
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
</div>
I am working on a project. How can I use Javascript to reveal a centered image when clicking inside a box without using a button?
Like this you mean? I used javascript a little, but it works!!!
<!DOCTYPE html>
<html>
<body>
<div style="background-color: red; width: 50px; height: 50px;" onclick="xSignDisplayLetter()" id="one"></div>
<br />
<div style="background-color: red; width: 50px; height: 50px;" onclick="xSignDisplayLetterVerTwo()" id="two"></div>
<br />
<div style="background-color: red; width: 50px; height: 50px;" onclick="revealImg()" id="image"></div>
<script>
function revealImg() {
document.getElementById("image").innerHTML = "<img src='https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png' alt='Image' style='width: 50px; height: 50px;' />"
}
function xSignDisplayLetter() {
document.getElementById("one").innerHTML = "<img src='https://image.freepik.com/free-icon/x-symbol_318-1407.jpg' alt='Image' style='width: 50px; height: 50px;' />"
}
function xSignDisplayLetterVerTwo() {
document.getElementById("two").innerHTML = "<img src='https://d3qdvvkm3r2z1i.cloudfront.net/media/catalog/product/cache/1/image/1800x/6b9ffbf72458f4fd2d3cb995d92e8889/n/o/nope_newthumb.png' alt='Image' style='width: 50px; height: 50px;' />"
}
</script>
</body>
</html>
If you don't know javaScript a little, then there are js tutorials all over the web.
W3Schools is a good idea for short-term tutorials that teach you a lot, and is relatively fun to mess around with.
CodeCademy is a good long-term full code tutorial that will take a few weeks to learn but helps a million via your coding skill. You will need to sign up but it's free and saves all your work (code) when you're done.
You should load the image in your HTML and hide it using a CSS class like hidden. Then you will want to use addEventListener to run a function when the image is clicked, which toggles the visibility of the image. The centering of the image can also be done using CSS.
const blocks = document.querySelectorAll('.block');
blocks.forEach((block) => {
block.addEventListener('click', () => toggleVisibility(block.querySelector('img')));
});
function toggleVisibility(el) {
el.classList.toggle('hidden');
}
.container {
display: flex;
}
.block {
background-color: red;
padding: 10px;
}
.hidden {
display: none;
}
<div class="container">
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
</div>
add an onclick attribute to your boxes that calls a function that shows a hidden image.
<div onclick="showImages()"></div>
you can add onclick listener to div and in onclick function you can change div's class
<div class="redbox" id="box" onclick="showImage()"></div>
showImage(){
var box =document.getelementbyid("box").
box.classList.remove("redbox");
box.classList.add("image");
}
Using Twitter Bootstrap 3, I have a container, three div place holders, and three images that fill as links each floated side by side and taking up the entire row: When I minimize the screen to make it responsive, I only see the first image (the second two dissapear). What steps would I have to take to make sure that each image becomes responsive and sits one below the other at the minimize dmobile display screen.
Please Note: Each Img. already has class="img-responsive" applied to it.
HTML:
<!--Wide Display Container -->
<div class="wide-display">
<div id="firstholder">
<a href="home.html" title="Home" class="imglink"><img src="/images/slide2.JPG" alt="City Lights Image" class="img-responsive" id="electricone">
<div class="item1">
<h1 class="slickfont1" >First Title</h1>
</div>
</a>
</div>
<div id="secondholder">
<a href="office.html" title="Office" class="imglink"><img src="/images/ant.JPG" alt="City Lights Image" class="img-responsive" id="electrictwo">
<div class="item1">
<h1 class="slickfont1" >Second Title</h1> </div></a>
</div>
<div id="thirdholder">
<a href="reviews.html" title="Locations" class="imglink"><img src="/images/family.JPG" alt="City Lights Image" class="img-responsive" id="thirdelectric">
<div class="item1">
<h1 class="slickfont1" > Third Title</h1>
</div>
</a>
</div>
</div><!-- Wide Display Container -->
CSS:
.wide-display {
min-width:33%;
position: relative;
width: 100%;
height:100%;
margin-top:6px;
overflow: hidden;
height:366px;
}
/*! First img Holder */
#firstholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
margin-left:1px;
margin-right:0px;
}
.item1 {
width: 24%;
margin: auto;
position:relative;
}
#secondholder {
width: 450px;
height: 100%;
float:left;
display:inline-block;
margin-right:0px;
}
#thirdholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
}
You have to create Bootstrap Grid to make it work. You can just read the documentation here: http://getbootstrap.com/css/ it's pretty easy to understand. The divs that wrap you images need to have grid classes applied to them.
How do I extract the iframe name with vbscript? like for example if my string value is
<DIV style="MARGIN-TOP: 0px; WIDTH: 670px; HEIGHT: 210px; VISIBILITY: visible; MARGIN-LEFT: -335px; TOP: 48px" id=TB_window><DIV id=TB_title> <DIV id=TB_ajaxWindowTitle>Add Media</DIV> <DIV id=TB_closeAjaxWindow><A id=TB_closeWindowButton title=Close href="#" jQuery172014112867239284427="140"><IMG src="http://www.gorgeoushentai.com/wp-includes/js/thickbox/tb-close.png"></A></DIV></DIV><IFRAME style="WIDTH: 670px; HEIGHT: 180px" id=TB_iframeContent onload=tb_showIframe() src="http://www.gorgeoushentai.com/wp-admin/media-upload.php?post_id=168&" frameBorder=0 name=TB_iframeContent656 hspace=0>This feature requires inline frames. You have iframes disabled or your browser does not support them.</IFRAME></DIV>
Then the extracted value would be TB_iframeContent656
I attempted to write the code in vbscript but it doesn't work
<script type="text/vbscript">
box="<DIV style=""MARGIN-TOP: 0px; WIDTH: 670px; HEIGHT: 210px; VISIBILITY: visible; MARGIN-LEFT: -335px; TOP: 48px"" id=TB_window><DIV id=TB_title> <DIV id=TB_ajaxWindowTitle>Add Media</DIV> <DIV id=TB_closeAjaxWindow><A id=TB_closeWindowButton title=Close href=""#"" jQuery172014112867239284427=""140""><IMG src=""http://www.gorgeoushentai.com/wp-includes/js/thickbox/tb-close.png""></A></DIV></DIV><IFRAME style=""WIDTH: 670px; HEIGHT: 180px"" id=TB_iframeContent onload=tb_showIframe() src=""http://www.gorgeoushentai.com/wp-admin/media-upload.php?post_id=168&"" frameBorder=0 name=TB_iframeContent656 hspace=0>This feature requires inline frames. You have iframes disabled or your browser does not support them.</IFRAME></DIV>"
data = box.document.getElementById("TB_iframeContent").name
document.write(data)
</script>
There are two things wrong with your code:
A string object doesn't contain a value/method named document.
When you execute it like this the code will be executed before the document is created so stuff like the iframe won't exist yet, so obviously such an element can't be found.
Look at the code below for a working example. First of all it will look at the actual page instead of a string. The WindowLoad function makes sure the page is loaded before executing the code.
<html>
<head>
<script type="text/vbscript">
Set window.onload = GetRef("WindowLoad")
Function WindowLoad
Dim somediv
Set somediv = document.getElementById("someid")
Dim data
Set data = document.getElementById("TB_iframeContent")
if data Is Nothing then
MsgBox("element does not exist")
else
somediv.InnerHTML = data.name
end if
End Function
</script>
</head>
<body>
<!-- Some ID for testing purposes -->
<div id="someid"></div>
<!-- The DIV with the iframe -->
<div style="MARGIN-TOP: 0px; WIDTH: 670px; HEIGHT: 210px; VISIBILITY: visible; MARGIN-LEFT: -335px; TOP: 48px" id=TB_window>
<div id=TB_title>
<div id=TB_ajaxWindowTitle>Add Media</DIV>
<DIV id=TB_closeAjaxWindow><A id=TB_closeWindowButton title=Close href="#" jQuery172014112867239284427="140">
<IMG src="http://www.gorgeoushentai.com/wp-includes/js/thickbox/tb-close.png"></A>
</DIV>
</DIV>
<IFRAME style="WIDTH: 670px; HEIGHT: 180px" id=TB_iframeContent onload=tb_showIframe() src="http://www.gorgeoushentai.com/wp-admin/media-upload.php?post_id=168&" frameBorder=0 name=TB_iframeContent656 hspace=0>This feature requires inline frames. You have iframes disabled or your browser does not support them.</IFRAME>
</DIV>
</body>
</html>