I'm working on a website for iphone using dashcode. But i don't know how to add a new html page to the 'site'. I could use stackLayout but it takes so much time to load the 'index.html' since it has all the stackLayout's views in it.
enlightenment needed :)
rather than adding a new html page you could split the existing index.html into "pages" with each page in a and then use the javascript to manipulate the visibility of the divs.
so the javascript looks like this
function hide_me(el) {
if(document.getElementById(el)) {
if(document.getElementById(el).style.display != "none")
document.getElementById(el).style.display = "none";
}
}
function show_me(el) {
if(document.getElementById(el)) {
if(document.getElementById(el).style.display == "none")
document.getElementById(el).style.display = "block";
}
}
then in the html
<ul>
<li><a href="javascript:
show_me('one');
hide_me('two');
hide_me('three');
etc......
</li>
</ul>
and further down the index.html
<div class="mainContent" id="one">
<!-- generated html -->
<table>
<tbody>
<tr class="head">
<td class="item" colspan="2">
CHMOD
</td>
</tr>
etc .....
</table>
</div>
This way the load is all taken when the widget is fired up and therafter you just display the divs as opposed to having to load them
Click:
FILE > NEW > FILE
Then, rename the file to "whatever.html"
You're welcome!
My site was made with Dashcode!
Related
I am new to wicket ,Please someone help me with a thought. I have a logic around a checkbox to display or not to display.
Problem:
when the logic of not to display a checkbox is on , which is by adding a display:none to the checkbox element dynamcially in code , there is a white space because of td surronding the checkbox.
my html looks like
<span wicket:id="checkgroup">
<table>
<tr wicket:id="srow" >
<td><input type="checkbox" wicket:id="scheck"/></td>
<td><img wicket:id="sicon"></img></td>
</tr>
</table>
</span>
so in code I have if else logic for adding a display:none to check box element which removes the checkbox from the view which looks like the below
<span wicket:id="checkgroup">
<table>
<tr wicket:id="srow" >
<td><input type="checkbox" wicket:id="scheck" style="display:none"/></td>
<td><img wicket:id="sicon"></img></td>
</tr>
</table>
</span>
final CheckGroup<Scope> checkGroup = new CheckGroup<>("checkGroup",
new ArrayList<> ());
ListView<Scope> listView = new ListView<Scope>
("srow", sList);
#Override
protected void populateItem(final ListItem<S> item)
{
Check<S> check = new Check<>("scheck", item.getModel(), checkGroup);
if(defaultscope)
{
check.add(new AttributeModifier("style","display:none"));
}
item.add(check);
}
so now my checkbox disappears but the surrounding td stays and causing a white space in display.
Any ideas on how to approach this issue.
Thanks.
You can use <wicket:enclosure> to remove html if the referenced child is not present. wicket enclosure.
Your code in populateItem could look like this:
Check<S> check = new Check<>("scheck", item.getModel(), checkGroup);
if(defaultscope)
{
check.setVisible(false);
}
item.add(check);
Your markup would look like this:
<tr wicket:id="srow" >
<wicket:enclosure>
<td><input type="checkbox" wicket:id="scheck"/></td>
</wicket:enclosure>
<td><img wicket:id="sicon"></img></td>
</tr>
I'm creating a tag system on my website. So far it's all working great. But now I wish to create a page that shows all my tags under their own tab like you have with a portfolio page.
Example: http://www.don-zalmrol.be/tags?tag=Electronics
My page already displays the tags for a specific tag under it's own tab (i.e. electronics), but as you might guess I wish to populate the other tags in their respective tab as well.
So in short you land a view that displays the tag you've selected, but on the same page you can see the others as well.
Anybody has any idea how I can do this? I don't think I'm far away from the solution as I can already load the projects for specific tags under it's own tab. Now I only need to populate the remaining tabs with the tags!
Thanks!
This is my code so far:
http://pastebin.com/jwGW0NKZ
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
var portfolio = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text);
var tagList = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text);
string tag = Request.QueryString["tag"];
if (!tag.IsNullOrWhiteSpace())
{
var publishedContent = Umbraco.TagQuery.GetContentByTag(tag);
if (publishedContent.Count() > 0)
{
#* Show title *#
<div class="media contact-info wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<center>
<div>
<i class="fa fa-tags"></i>
</div>
<br />
<div class="media-body">
<h2>Tags</h2>
<p>Browse content by tag</p>
</div>
</center>
<br />
</div>
#* Show tag titles in tabs *#
<ul class="portfolio-filter text-center">
<li><a class="btn btn-default" href="#" data-filter="*">All tags</a></li>
#foreach (var tags in tagList)
{
<!-- Create a selected tag -->
if(#tags.Text == #tag)
{
<li><a class="btn btn-default active" href="#" data-filter=".#tag">#tag</a></li>
}
#* Show all other tags *#
else
{
<li><a class="btn btn-default" href="#" data-filter=".#tags.Text">#tags.Text</a></li>
}
}
</ul>
<div class="row">
<div class="portfolio-items">
#* Start picture content *#
#foreach (var tags in tagList)
{
#* Put selected tag in the right tag tab *#
if(#tags.Text == #tag)
{
#* Show tag content *#
foreach (var item in publishedContent.OrderByDescending(i => i.CreateDate))
{
<div class='portfolio-item #tag col-xs-12 col-sm-4 col-md-3'>
<div class="recent-work-wrap">
#* IF the project has a picture *#
#if(item.HasValue("pictureOfTheProject"))
{
var featureImage = Umbraco.TypedMedia((int)item.GetPropertyValue("pictureOfTheProject"));
<img class="img-responsive" src="#featureImage.GetCropUrl(250, 250)" alt='#item.GetPropertyValue("titleOfTheProject")' />
<div class="overlay">
<div class="recent-work-inner">
<h3>#item.GetPropertyValue("titleOfTheProject")</h3>
<a class="preview" href="#featureImage.GetCropUrl(250, 250)" rel="prettyPhoto">
<i class="fa fa-eye"></i> View
</a>
</div>
</div>
}
#* Else when the project doesnt have a picture, show default one *#
else
{
var noImage = "http://www.don-zalmrol.be/media/1440/no_image_available.png";
<img class="img-responsive" src="#noImage.GetCropUrl(250, 250)" alt="No image" />
<div class="overlay">
<div class="recent-work-inner">
<h3>#item.GetPropertyValue("titleOfTheProject")</h3>
<a class="preview" href="#noImage.GetCropUrl(250, 250)" rel="prettyPhoto">
<i class="fa fa-eye"></i> View
</a>
</div>
</div>
}
</div>
</div>
}
}
#* Put the other tags under there own tab *#
else
{
}
}
#* End dynamic tags *#
</div>
</div>
}
#* No content matching the tag? *#
else
{
<p>There isn't any content matching that tag.</p>
#Html.Partial("TagList")
}
}
#* Show the tag list with amount *#
else
{
#Html.Partial("TagList")
}
}
EDIT 27-03-2016
Ok so I now know that I need to play around with my tag query or use the IEnumerable. But I can't seem to find it out how I can do this without breaking the code...
#* Get all tags and order them by name *#
var tagList = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text);
#* Get requested tag *#
string tag = Request.QueryString["tag"];
#* Show all content by requested tag *#
var publishedContent = Umbraco.TagQuery.GetContentByTag(tag);
Above are the pieces of code that list all the tags I have in a var, gets the name from the URL (i.e. Electronics) and one that then displays all content that matches said queried tag.
So in short I need to change the last part of the TagQuery to list all content that has a tag and then filter it out by the querystring to display them in their own category.
But how can list all tagcontent?
Cheers,
Don
Your issue is on line 76 of the pastebin where you loop through the published content, which is already filtered by the selected tag. Because of this, only content with the selected tag ever gets written to the template.
What you need to do is use the loop on line 70 where you're looping through all tags. The jQuery plugin you're using will handle the filtering by using the CSS class you add on line 78. You can get rid of the loop on line 76.
For clarity, I would also change the
#foreach (var tags in tagList)
to
#foreach (var item in tagList)
since the foreach is producing a single tag rather than plural "tags" as your code insinuates. This has the added bonus of allowing you to keep the rest of your code the same once you remove the loop on line 76.
In my JQUerymobile pages, I have embedded popup div.
Here is an example of my pages content :
<html>
<head>...</head>
<body>
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >...</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b">
</div>
</div>
<div data-role="popup" id="popupTwo" data-dom-cache="true" data-theme="b">
...
</div>
</body>
</html>
I navigate from pages to anothers. Suddently, my embedded popups disappear from my DOM when I inspect my code.
As shown in my example, the popup location in the source code doesn't seem to change anything to the problem.
Since popups are removed from DOM, the code bellow does nothing (it actually worked before) :
$('#popupOne').trigger('create');
$('#popupOne').popup({ transition: "slidedown", position:"position-header" });
$('#popupOne').popup('open');
Is there a solution to keep my popups in my DOM ?
Is there a better location to embed popups in source code ?
Another way could be to load a popup from an external (cached) page but i never achieved to do that by javascript.
Any idea to solve the problem (or a workaround) ?
(Both) your HTML placements might be incorrect here. Remove the popupOne markup from the end of the page and paste it inside the div with data-role=content like this :
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b"></div>
</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
</div>
And if you want to reuse popups, I suggest you go the JS way. You could create popups n the fly and open them. Here's some code which does just that. Feel free to alter it to any thing you want :)
$.extend({
"makePopup": function (text) {
var $popup;
//creat popup element
$popup = $("<div/>", {
"data-role": "popup",
"data-theme": "a",
"data-overlay-theme": "a",
"data-transition": "pop"
}).popup();
//create close element
var $close = $("<a/>", {
"data-role": "button",
"html": "Close",
"href": "#",
"data-theme": "e"
}).on("click", function () {
//click event of close element
$(this).closest("[data-role=popup]").popup("close");
}).buttonMarkup();
//create content div - makes a nice jQM page structure.
var $content = $("<div/>", {
"data-role": "content",
//change this any way you want- Im just adding the text from clicked link here.
"html": "<span>" + text + "</span>"
});
//append $close to $content, then append $content to $popup
$content.append($close).appendTo($popup);
return $popup;
}
});
And when you want to use this, just do this,
var popupEl = $.makePopup("Some HTML");
And then you could, say, open it :
popupEl.popup("open");
Or simply,
$.makePopup("Some HTML").popup("open");
Here's a demo : http://jsfiddle.net/hungerpain/xjz3V/
Hope this is what you wanted :)
I have HTML loaded with the Jquery .load method and need to dynamically change anchor HREF and input button ONCLICK targets in this HTML on the client as the page loads, (I don't have the option to change the server generated HTML).
The .load works fine and I can change the HREF target OK but I can't find a way of changing the ONCLICK target?
HTML
Anchor HREF
<div style="width:143px;" id="LM_OBJV">
<span title="View Objectives Detail" class="PSHYPERLINK">
<a class="PSHYPERLINK" href="javascript:Action_win0
(document.win0,'LM_OBJV','Relationship Building',false,true);" tabindex="54"
id="LM_OBJV" name="LM_OBJV">Relationship Building</a>
</span>
</div>
Button ONCLICK
<div id="win0divLM">
<a id="Left" style="background-Color: transparent;border:0;" class="PBUTTON">
<span style="background-Color: transparent;">
<input type="button" onclick="Action_win0(document.win0,'LM_PB', 0, 0, 'Add New',
false, true);" style="width:120px; " class="PBUTTON" value="Add New" tabindex="77"
id="LM_PB" name="LM_PB">
</span>
</a>
</div>
Javascript
$('#result').load('some.php', function() {
$("a.PSHYPERLINK")
.each(function()
{
this.href = this.href.replace("Action_win0", "Action_winx");
});
});
So this JS works fine, loads the HTML into the #results DIV and changes the HREF's from "Action_win0" to "Action_winx".
But how can I also change the input type="button ONCLICK events from "Action_win0" to "Action_winx"? I've tried several Jquery selectors but just can't get it to work :(
$('a.PSHYPERLINK').attr('onclick', 'alert("bar")')
Demo: http://jsfiddle.net/kzVSt/
I am working on an e-commerce application shopping cart. I have a pricing page which display a list of products and their prices for multiple categories. User can choose to add multiple products to shopping cart (active shopping cart is being shown on right hand side of page). I am trying to use Ajax/jQuery for adding items to my cart. I have a form wrapped around each product which contains multiple hidden fields I would like to pass to my function and to the controller. You can see all these in the code below:
<% foreach (var _category in Model) { %>
<% foreach (var _product in _category.Products)
{ %>
<tr>
<td align="left" valign="top"><% = _product.Description %> (<% = _product.Code %>)</td>
<td valign="top" align="center">$<% = _product.TotalPrice %></td>
<td align="left">
<form id="frmProduct_<%=_product.Code%>">
<input type="button" onclick="JavaScript:addProductToBasket(this.form);" value="+ Add to cart" />
<input type="text" id="hProductCode" value="<% = _product.Code %>" />
<input type="text" id="Text1" value="<% = _product.TotalPrice %>" />
<!--Other hidden fields for passing data -->
</form>
</td>
</tr>
<% } %>
<% } %>
Since I have multiple forms on page, I am having hard time accessing a particular form inside my javascript function. What is a best way to handle this scenario?
<script type="text/javascript">
function addProductToBasket(_form) {
alert('Hi');
var str = $('#_form').serialize();
alert(str);
}
</script>
I am using ASP.NET MVC 2.0 and cannot move to MVC 3.0 at the moment.
Try to make your forms working without using javascript first. Then start thinking about all the ajax and jQuery stuff.
Remove the id attribute from the forms and add an action attribute (or use the MVC method: Using Html.BeginForm), add a class attribute to the form tag.
Remove the Totalprice field, you should always calculate this server-side, the only fields you need to submit are the product code (and a quantity).
Remove the javascript button and replace it with a classic submit button.
When you want to ajaxify the form, try something like this:
$(function () {
$(".addproductform").submit(function () { // turn all forms with the addproductform class into an ajax version
$.post($(this).attr("action"), $(this).serialize(), function (data) {
// data contains the confirmation or failure that the product was added to your cart, update the cart html on this page
});
return false; // form already submitted using ajax, don't submit it again the regular way
});
});