I don't think "simplest" is subjective.
Looking for a hostable photo gallery that does nothing but show an image and provide "next image" and "previous image" but all without reloading the page. Obviously precaching would be nice too. PHP, Python, Ruby, or JS.
If you want simple, maybe something like this?
<html>
<body>
<div>
<img id="image">
</img>
</div>
<table>
<tr>
<td onclick="getImage("previous");">Previous</td>
<td onclick="getImage("next");">Next</td>
</tr>
</table>
<script type="text/javascript">
counter = 0;
nextImage = new Image();
previousImage = new Image();
getImage = function(what) {
if (what === "previous") {counter--;}
else {counter++;}
nextImage.src = "http://www.example.com/image?data=" + (counter + 1);
previousImage.src = "http://www.example.com/image?data=" + (counter - 1);
document.getElementById("image").src = "http://www.example.com/image?data=" + counter;
}
</script>
</body>
</html>
Related
I have a fix colorstring like "#ff0000" and I set this fix string like this (with AngularJS):
<div style="background-color: {{chatMessageOfUser.color}};">...
Now I will set an opacity only to the background-color. Actually I dont know how to do this without splitting the chatMessageOfUser.color- string?
HTML
ng-class="{'opacityclass': chatMessageOfUser.color == '#ff0000'}"
CSS
.opacityclass
{
opacity :0.5
}
HTML
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
.opacityclass
{
opacity :0.5
}
</style>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-style="myObj">Welcome</h1>
<h1 ng-class="{'opacityclass': chatMessageOfUser.color == '#ff0000'}">Welcome</h1>
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td ng-class="{'opacityclass': x.color == '#ff0000'}">{{ x.Country }}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.names = [
{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany" , "color":"#00000"},
{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"fdgdgdg" ,"color":"#066000"},
{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"yuiyui" ,"color":"#ff0000"}
]
$scope.chatMessageOfUser ={
"color" : "#ff0000",
}
});
</script>
</body>
</html>
reference https://plnkr.co/edit/v6hbk1uMzS5p8bxcDLFT?p=preview
If I understood your question correctly you will need to split your input. You can do this in a filter however.
Here is some rough example (note that this is not production ready since you still need input validation, ...):
.filter('color', function()
{
return function(colorString, opacity)
{
opacity = opacity || 1;
colorString = colorString.replace('#', '');
var splitColor = colorString.match(/.{1,2}/g);
splitColor = splitColor.map(function(hex) { return parseInt(hex, 16); });
return 'rgba(' + splitColor[0] + ', ' + splitColor[1] + ', ' + splitColor[2] + ', ' + opacity + ')';
}
});
The usage of this snippet would be
<div class="colorField" style="background-color: {{colorInput | color:colorAlpha}}">
See this fiddle to see it in action.
I am in a tricky situation,
Scenario- There are gadgets which are to be shown in mobile site.
2.One of the gadget is RSS which user can add multiple times for different topics like one for security, one for news, one for events.
3. So we have 1 partial view for RSS, but if the user has 2 RSS gadgets then the same partial view should load with different gadget name. Here the functionality is working fine using foreach loop.
#foreach (var rssFeed in Model.RSSFeedList)
{
<article class="bm2014_bigBoxWrap bm2014_bigBoxRSS bm2014_paginate">
<img src="~/Content/images/iconRefresh.png" width="20" height="20" alt="refresh icon" title="refresh icon">
<div class="bm2014_expColCtrl">
<h1 class="bm2014_bigBoxHdr">
<span class="bm2014_hiddenHdr"> </span>
<!-- for markup validation -->
#if (rssFeed.Channel.Name == "xyznews")
{
<span>#Html.Label(Labels.Title_xyz)</span>
}
else if(rssFeed.Channel.Category=="xyzRSSFeed")
{
<!--<span>#Html.Label(Labels.xyz) - #rssFeed.Channel.Title</span>-->
<span>#rssFeed.Channel.Title</span>
}
<span class="bm2014_expColBtn"><img src="~/Content/images/iconPlus.png" width="32" height="32" alt="expand collapse icon" title="expand collapse icon"></span>
</h1>
<div class="bm2014_expColContent bm2014_bellnetRSSWrapper" id="bm2014_divBellnetRSS">
#Html.Partial("~/Views/Shared/_RSS.cshtml", rssFeed)
</div>
</div>
</article>
}
<!-- RSS Panel end here -->
Problem is with refresh issue
if i hit the refresh button for selected gadget, it is by default taking only one RSS name and loading the content irrespective of different gadget selected.
partialview page code-
#model Models.RSSFeed
#{
Layout = null;
}
<script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.multilevelpushmenu.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-simple-pagination-plugin.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript">
/* scripts to load after the DOM gets ready */
$(function () {
offCanvasMenu(); // trigger Javascript controlled OFF canvas menu after AJAX refresh
$.ajaxSetup({ cache: false });
$("article.bm2014_bigBoxRSS #btnRefresh").on('click', function (event) {
var $rssGadgetID = $(this).parents("article.bm2014_paginate").find("div#bm2014_divBellnetRSS");
var $rssGadgetLdr = $rssGadgetID.find("div#bm2014_gadgetLoader");
ajaxLoaderHeightCtrl($rssGadgetID, $rssGadgetLdr);
// AJAX control
$.ajax({
url: '#Url.Action("RefreshBellnetRSS", "Home", new { feedName = Model.Channel.FeedName })',
contentType: 'application/html; charaset=utf-8',
type: 'GET',
dataType: 'html',
success: function (result) {
$rssGadgetLdr.fadeOut(100, function () {
$rssGadgetID.html(result);
var moveRSS = $("article.bm2014_bigBoxWrap").css("float");
if (moveRSS == "left") {
mQueryAJAX("portrait", $rssGadgetID);
}
else if (moveRSS == "none") {
if (window.matchMedia("(orientation: portrait)").matches) {
mQueryAJAX("portrait", $rssGadgetID);
}
if (window.matchMedia("(orientation: landscape)").matches) {
mQueryAJAX("portrait", $rssGadgetID);
}
}
hideTableHeader();
});
},
error: function (xhr, status) {
alert(status);
}
});
});
});
</script>
<div class="bm2014_gadgetLoader" id="bm2014_gadgetLoader" style="display: none;">
<img src='#Url.Content("~/Content/Images/loaderGadget.gif")' width="48" height="48" alt="ajax loader image" title="ajax loader image">
</div>
<div class="bm2014_strategyContent">
#if (Model.url != null)
{
<table>
<thead>
<th>dummy header - to be hidden</th>
</thead>
<tbody>
#foreach (var url in Model.url)
{
<tr>
<td>
#url.Name
</td>
</tr>
}
</tbody>
</table>
}
</div>
need help/suggestions
If I understand correctly, you need to have 3 refresh buttons for 3 RSS gadgets e.g. one for security, one for news, one for events.
In the current example, every time you call the code to apply click event, you replace the earlier event and the 'feedname' parameter in url for ajax call also gets updated.
$("article.bm2014_bigBoxRSS #btnRefresh").on('click', function (event) {
......
}
You need to be able to distinguish between the refresh buttons and pass correct parameters. One way is to use data-feedname attribute on your btnRefresh anchor tag (if using HTML5)
I'm trying to create a table that populates each table cell with an object from a JSON file. My handlebars template just adds a with the data for each object. What I'm trying accomplish is for every 5th item a new row is created and then it continues populating out the table cells until the 10th item then it creates a new row etc.
I've been reading up on #index. Is there some function that does something like {{#if #index / 5 == 0}} ? Otherwise is there something handlebars offers that could achieve the functionality I'm trying to do? I'm not confined to use a table I just figured that was the best option to put the data.
My current template. Thanks for any help! I edited this below using a handlebars helper. But the information still doesn't render. There is additional code that compiles the template after the end of this but it includes a very long json array in the local file for testing.
<script type = "text/x-handlebars-template" id="itemTemplate">
<table class="tableStyle">
<tr>
{{#each all_coupons}}
{{#ifPos}}
<tr>
<td>
<div class="wrapper">
<div class="header">{{coupon_title}}</div>
<div class="column_wrapper">
<div class="two-col">
<div class="product_image"><img src="{{coupon_thumb}}" alt="Apple" height="110" width="110"></div>
<div class="description">{{coupon_description}}</div>
</div>
</div>
<div class="expiration">Valid From: {{valid_from}} to {{valid_to}}</div>
</div>
</td>
</tr>
{{else}}
<td>
<div class="wrapper">
<div class="header">{{coupon_title}}</div>
<div class="column_wrapper">
<div class="two-col">
<div class="product_image"><img src="{{coupon_thumb}}" alt="Apple" height="110" width="110"></div>
<div class="description">{{coupon_description}}</div>
</div>
</div>
<div class="expiration">Valid From: {{valid_from}} to {{valid_to}}</div>
</div>
</td>
{{/ifPos}}
{{/each}}
</tr>
<table>
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src-"js/handlebars.runtime-v1.3.0.js"></script>
<script type="text/javascript">
Handlebars.registerHelper('ifPos', function (context, options) {
var pos = false;
for (var i = 0, j = context.length; i < j; i++) {
if (context.length/5 == 0)
{
pos = true;
}
else {
pos = false;
}
}
console.log(pos);
return pos;
});
context.length/5 == 0
will not give you the value you want every 5th element. As 5/5 is 1, better to use modulus(%) which gives you the remainder, this way when it equals 0 you know it has gone into it whole.
Also when wanting to do your own if/else block handle bars provides you with options.fn and options.inverse. Return options.fn(//whatever you want to pass to the if block) or options.inverse(//what ever to provide to the else block) from your helper to go into the relevant part of the block.
Here is a code pen showing a quick example of how you could get the index position of the element you are iterating over and apply a styling based on that.
The helper functions will go to the true part of the if block when index % 3 is 0 (the first, because it is a 0 based index, and then every 3rd element. All other times it will go to the else
Helper
Handlebars.registerHelper('ifThird', function (index, options) {
if(index%3 == 0){
return options.fn(this);
} else {
return options.inverse(this);
}
});
Template
<script id="template" type="text/x-handlebars-template">
{{#each this}}
<p class="{{#ifThird #index}}
red
{{else}}
blue
{{/ifThird}}">{{#index}} - {{name}}</p>
{{/each}}
</script>
I created in blog spot a new page for a gallery with a menu, the result is good but there is so much space between the buttons, and a big gap in the top of the page, when I try <b> or <p> It wont go, I also tried to minimise the space with another script but the result was no space but unclickable buttons, and always when I success deleting spaces, the buttons wont work ! Please help me ! (It works on dreamweaver perfectly but not on Blogger !
This is the code :
<p> <p><b:include data='blog' name='all-head-content'/></p>
<p><style type="text/css">
.menutitle{
cursor:pointer;
<span style="margin-bottom: 5px"><br>;
background-color:#000000 ;
color:#FFF;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:0px solid #000000;/* */
}</p>
.submenu{
margin-bottom: 0.5em;
}
</style> </p>
</b:if>
<p><script type="text/javascript">
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
<p>if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate </p>
</script></p>
<!-- Keep all menus within masterdiv-->
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">Dior</div>
<span class="submenu" id="sub1">
<p><div id="PictoBrowser110620155241">Get the flash player here: http://www.adobe.com/flashplayer</div><script type="text/javascript" src="http://www.db798.com/pictobrowser/swfobject.js"></script><script type="text/javascript"> var so = new SWFObject("http://www.db798.com/pictobrowser.swf", "PictoBrowser", "500", "650", "8", "#000000"); so.addVariable("source", "sets"); so.addVariable("names", "Scheisse"); so.addVariable("userName", "ScheisseMag"); so.addVariable("userId", "64286522#N04"); so.addVariable("ids", "72157626880953125"); so.addVariable("titles", "on"); so.addVariable("displayNotes", "on"); so.addVariable("thumbAutoHide", "off"); so.addVariable("imageSize", "medium"); so.addVariable("vAlign", "mid"); so.addVariable("vertOffset", "0"); so.addVariable("colorHexVar", "f"); so.addVariable("initialScale", "on"); so.addVariable("bgAlpha", "8"); so.write("PictoBrowser110620155241"); </script>
</span>
<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">
- Usage Terms<br>
- DHTML FAQs<br>
- Scripts FAQs</span>
<div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
<span class="submenu" id="sub3">
- Coding Forums<br></span>
<div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>
<span class="submenu" id="sub4">
- JavaScript Kit<br>
- Freewarejava<br>
- Cool Text<br>
- Google.com
</span></p></div> </p>
I'm assuming you're using Firefox, because it doesn't seem to work the same using other browsers..
the problem is the space between eich
bouton like between Dior and Faq/help
and help forum, they are meant to be
attached to each other
I'll start by saying that I'm not familiar with Blogger.
Your HTML:
<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">..</span>
<div class="menutitle" onclick="SwitchMenu('sub3')">
What you get if you View Source on your page:
<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">..</span><br /> <!-- extra br! -->
<div class="menutitle" onclick="SwitchMenu('sub3')">
Those frequent extra <br />s are the main problem. There are lots of them. You need to prevent them from being inserted. Perhaps removing the whitespace in your HTML will help? Like this:
<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">..</span><div class="menutitle" onclick="SwitchMenu('sub3')">
also the gap between the Title of the
page and those menus !
You need to get rid of many instances of <p> and </p> that are wrapped around everything, including <script>s, for some reason..
Also, you have the same problem with <br />s being magically inserted. Again, compare your HTML to what comes out when you use View Source in your browser.
After removing those extraneous <p> and </p> and <br /> using Firebug (just to test), this was the result:
I've read in another question here how could I use custom CSS within my Sharepoint WebPart. So I followed this link:
http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=42
And I put my css as an embedded resource. Everything ok, I launch the page.
But my style doesn't appear.
I peek at the source code, and I find my resource:
<script src="/WebResource.axd?d=YuTREer2woiGbjiSaZdP0bLrdm6vpTygUffdwMFJr0zmn76B3vav0QRpmxzvYvKzZRnmgKpNbLHpnJf-W4rfrv-MrIZEoz6tWi5xHXTiN3lcxdP3s7ysDExW-eBQTlH8cUrMRw2&t=634369276247430484" type="text/javascript"></script>
Which leads me to my css:
.webPartContainer
{
background-color:Aqua;
}
.webPartContainer .Text
{
font-size:xx-large;
}
And here's where it references the styles:
<td class="ms-WPBorder" valign="top">
<div WebPartID="2109154d-6921-46ac-84d4-8ce24a926617" HasPers="false" id="WebPartctl00_m_g_2109154d_6921_46ac_84d4_8ce24a926617" width="100%" class="ms-WPBody" allowDelete="false" allowExport="false" style="" >
<div id="ctl00_m_g_2109154d_6921_46ac_84d4_8ce24a926617">
<div class="webPartContainer">
<span class="Text">Hello World with container!</span>
</div>
</div>
</div>
</td>
What's possibly happening ?
Thanks in advance !
EDIT: CssRegistration gives me permission errors, why ?
The browser don't expect the content of a <script type='text/javascript'> tag to be CSS.
So you should change your code to something like this:
string tempLink= "<link rel='stylesheet' text='text/css' href='{0}' />";
string location = Page.ClientScript.GetWebResourceUrl(this.GetType(), "myStyleSheet.css");
LiteralControl include = new LiteralControl(String.Format(tempLink, location));
Controls.Add(include);