I am novice in JQuery UI. I am trying code for opening jquery dialog with image and text from existing code in one of div tags. My code is
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".peter_pic").click(function(){
$( ".peter" ).dialog( "open" );
});
$( ".peter" ).dialog({ autoOpen: false });
});
$( window ).load(function() {
$(".peter").hide();
});
</script>
<div class="Table" style="display: table;" >
<div style="display: table-row;">
<div style="display: table-cell;" class = "test">
<img class = "peter_pic" src="someimage.jpg" />
<div data-role="popup" class="peter">
Display some text. Display some text. Display some text.
</div>
</div>
</div>
</div>
I figured out on my own about the solution.
I added multiple img tag. This solved the problem.
<div class="Table" style="display: table;" >
<div style="display: table-row;">
<div style="display: table-cell;" class = "test">
<img class = "peter_pic" src="someimage.jpg" />
<div data-role="popup" class="peter">
<img class = "peter_pic" src="someimage.jpg" />
Display some text. Display some text. Display some text.
</div>
</div>
</div>
</div>
Related
HTML
<script type="text/javascript" src="/static/opt/require.js" data-main="/static/opt/demo"></script>
<script type="text/javascript" src="/static/opt/demo.js"></script>
<script src="/static/opt/monaco-editor/package/min/vs/loader.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12" style="margin-top: 20px">
<div class="col-md-4 col-sm-4 col-xs-4" style="padding: 0;display: inline-flex;margin-left: 175px">
<div id="input_editor" ></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="margin-left:165px;display: inline-flex">
<div id="show_editor" ></div>
</div>
</div>
demo.js
require.config({paths:{'vs':'/static/opt/monaco-editor/package/min/vs'}});
$(document).ready(function () {
require(['vs/editor/editor.main'], function(){
var input_editor = monaco.editor.create(document.getElementById("input_editor"), {
value: "aaa"
})
})
require(['vs/editor/editor.main'], function(){
var show_editor = monaco.editor.create(document.getElementById("show_editor"), {
value: "bbbbb"
})
})
})
Is there anything wrong in my code? How should I use monaco editor in HTML?
And is there any api to color somelines red or green in the Monaca Editor?
Thanks
this is simple. I'm trying to align-items-bottom a gear svg image to the bottom center of a div. However, it always keeps at the top of the div.
I tried both align-items-center and also align-bottom options.
What happens
How it should be
.gear {
height: 50px;
}
.banner {
height: 70px;
}
<footer>
<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-bottom">
<img class="gear d-flex" src="/assets/gear.svg">
</div>
</footer>
There is no align-items-bottom class. The class name is align-items-end..
<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-end">
<img class="gear d-flex" src="//placehold.it/300x70">
</div>
https://www.codeply.com/go/ub6hNpd9TL
Rows and column are your friends in Bootstrap.
So, create a pair, put your image/SVG inside, apply the class d-flex to the column and mt-auto (margin-top:auto) to the image.
Click the "run code snippet" button below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<footer>
<div class="container-fluid bg-warning banner d-flex justify-content-center">
<div class="row" style="height: 60px;">
<div class="col d-flex">
<img class="gear mt-auto" src="https://placehold.it/30">
</div>
</div>
</div>
</footer>
I am creating a website using MVC5 (we do for all our websites here) and I am trying to integrate the FlexSlider (found here: https://woocommerce.com/flexslider/) into one of my pages.
I can't seem to get it working, the page just displays nothing, yet it appears in the 'Inspect Element' with each image as being 0x0 px.
HTML:
<div class="flexslider" data-controlnav="thumbnails">
<ul class="slides">
#if (Model.CDSContent != null)
{
foreach (var item in Model.CDSContent)
{
<li>
<a href="#">
<img src="#Html.Raw(item["newsimage"])" alt="Slide 2">
<div class="flex-caption">newstitle</div>
</a>
</li>
}
}
</ul>
</div>
I also have the JS and CSS linked:
<link rel="stylesheet" type="text/css" href="http://flexslider.woothemes.com/css/flexslider.css">
<link rel="stylesheet" type="text/css" href="http://lab.mattvarone.com/projects/jquery/totop/css/ui.totop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.easing.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.mousewheel.js"></script>
<script type='text/javascript' src="http://lab.mattvarone.com/projects/jquery/totop/js/jquery.ui.totop.js"></script>
Of course its a little bit difficult to say why your code is not working.
Have you checked what #Html.Raw(item["newsimage"]) returns ?
But...
You could use a carousel that runs on bootstrap.
The code below i made is to scan a folder for images and then i send them to the view with a viewbag.
--Controller code Start--
var GetSliderImaged = Directory.EnumerateFiles(Server.MapPath("~/Content/SlideShowIndexPage")).Select(fn => Path.GetFileName(fn));
ViewBag.Sliderimages = GetSliderImaged;
--Controller code End--
--View code Start--
<div id="myCarousel" class="carousel slide MTop10 BRadius10 unselectable" data-ride="carousel" data-interval="6000">
<ol class="carousel-indicators" style="margin-bottom: 0px;">
#{
var ii = 0;
foreach (var image in ViewBag.Sliderimages)
{
if (ii == 0)
{
<li data-target="#myCarousel" data-slide-to="#ii" class="active"></li>
}
else
{
<li data-target="#myCarousel" data-slide-to="#ii"></li>
}
ii++;
}
}
</ol>
<div class="carousel-inner " role="listbox">
#{
var i = 0;
foreach (var image in ViewBag.Sliderimages)
{
if (i == 0)
{
<div class="item active">
<img src="~/Content/SlideShowIndexPage/#image" alt="#image" title="#image" class="img-responsive AWIndexPageSlideImage" />
<div class="carousel-caption">
</div>
</div>
i++;
}
else
{
<div class="item">
<img src="~/Content/SlideShowIndexPage/#image" alt="#image" title="#image" class="img-responsive AWIndexPageSlideImage" />
<div class="carousel-caption">
</div>
</div>
}
}
}
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
--View code End--
Just so you know .. the code is not complete but its works for sure if there are images "It does not check if there are no images in the viewbag etc"
But for sure that will be easy to make it yourself.
I'm trying to add the html5 drag 'n drop upload file on my JSF web page so i had to add this script into it
<script type="text/html" id="template-uploads">
//<![CDATA[
<div data-bind="visible: showTotalProgress()">
<div>
<span data-bind="text: uploadSpeedFormatted()"></span>
<span data-bind="text: timeRemainingFormatted()" style="float: right;"></span>
</div>
<div class="uploadimage-totalprogress">
<div class="uploadimage-totalprogressbar" style="width: 0%;" data-bind="style: { width: totalProgress() + '%' }"></div>
</div>
</div>
<div data-bind="foreach: uploads">
<div class="uploadimage-upload" data-bind="css: { 'uploadimage-uploadcompleted': uploadCompleted() }">
<div class="uploadimage-fileinfo">
<strong data-bind="text: fileName"></strong>
<span data-bind="text: fileSizeFormated"></span>
<span class="uploadimage-progresspct" data-bind="visible: uploadProgress() < 100"><span data-bind="text: uploadSpeedFormatted()"></span></span>
</div>
<div class="uploadimage-progress">
<div class="uploadimage-progressbar" style="width: 0%;" data-bind="style: { width: uploadProgress() + '%' }"></div>
</div>
</div>
</div>
//]]>
</script>
if i take out the cdata tag which is around my script i get this error :
The value of attribute "data-bind" associated with an element type
"span" must not contain the '<' character.
The script you've posted is a text/html script which acts as a template in knockout. That id is required for knockout to reference the template.
As for the CDATA sections, unless you're using XML you can take them out.
My Masonry "bricks" or items are overlapping when I load the page sometimes. But when I make my browser window smaller and then bigger, the items displays correctly. I'm using the HTML implementation method. The URL to my page is www.humansofjohannesburg.org.
Can anyone help please?
Thanks
<div class="hoj js-masonry" id="container" data-masonry-options='{ "columnWidth": 247, "itemSelector": ".hoj-item", "gutter": 10, "isResizeBound": true }'>
<!-- ITEM -->
<div class="hoj-item">
<div class="hoj-image">
<img src="image.jpg" />
</div>
<div class="hoj-intro">
Content text goes here...
</div>
</div>
<!-- ITEM -->
<div class="hoj-item">
<div class="hoj-image">
<img src="image.jpg" />
</div>
<div class="hoj-intro">
Content text goes here...
</div>
</div>
<!-- ITEM -->
<div class="hoj-item">
<div class="hoj-image">
<img src="image.jpg" />
</div>
<div class="hoj-intro">
Content text goes here...
</div>
</div>
<!-- ITEM -->
<div class="hoj-item">
<div class="hoj-image">
<img src="image.jpg" />
</div>
<div class="hoj-intro">
Content text goes here...
</div>
</div>