Good moorning.
I have got a variable $awards = array which contents some data from database from specific users. This variable extracts a set of awards to result set of users.
<div>
<span class="zoom-gallery" n:foreach="$awards as $award" n:if="$award['user_id'] == $solver['id']">
<a href="{$basePath}{$award['link']}">
<img src="{$basePath}{$award['preview']}"/>
</a>
</span>
</div>
However, some users have so much awards -> I would like to show first 4 awards between two arrows allowing going through the other.
Example: arrow_prev AWARD1 AWARD2 AWARD3 AWARD4 arrow_next
Could you help me how to do it? I know it's solvable through javascript but I dont know javascrip much (beginner). Or - does exist some plugin? Thank you
Related
I have a Post Text Item at the end of my text fields.
When I click on it, it shows a PopUp, that retrieves a key to insert in one of my tables. It is possible that after I close the PopUp, the Post Item disappear from the screen?
I call the popup this way:
<a href="javascript:callMyPopup(836,'P831_AC_KEY_1','P831_AC_KEY','P836_AC_KEY','P836_AC_KEY_1');">
<img src="/i/list.gif" title="Select Service" width="13" height="13" alt="Popup Lov" />
</a>
<div id = "msg1" style="color:red"><strong></strong></div>
Thanks in advance!
I figure a way to trick the user. The original field is shown with a server side condition, where item IS NOT NULL. When Item IS NULL, I hide the other. It is a workaround but it works. And the user will see like the button hides.
Maybe someone can find this "solution" easy or can come with a better idea.
Thanks anyway!
I am working on a school project and I have to do a static digital menu website for a bar. Because it's static, I used JavaScript where necessary. Anyways, I divided everything into groups, each group is represented by a card with an image and a button. Here is an example:
This is the source code for a card:
<body>
<div id="cards">
<div class="card">
<img src="/Resources/Food.png" class="card_image">
<a href="javascript:showMenu()" class="button">
<p>FOOD</p>
</a>
</div>
</div>
</body>
As you can see, in order to add a single card, I had to manually write the whole structure of a card in the second div, with the class="card".
BUT, I must create it dynamically based on the structure of the subfolders inside the Root folder witch is called Resources, here's a scheme:
In order to achieve this I started using JavaScript since it's the only possible way I think:
<script type="text/javascript">
function showMenu()
{
var content = `
<div class="card">
<img src="/Resources/Food.png" class="card_image">
<a href="javascript:showMenu()" class="button">
<p>FOOD</p>
</a>
</div>`;
document.querySelector("#cards").innerHTML = content;
}
</script>
So, now that I've expressed what I need to do is this: in the JavaScript code you can see that the card was generated manually anyways but I need the content to generate based on the folder structure I have stored locally. In other words, the whole script should take in input the name/path of the ROOT folder which is called "Resources" and from there it should generate the groups based on it's content. For example, if I click the button on the FOOD Card, then it should delete the FOOD and DRINKS Cards and only add the Vegetables Card in this case...I know it sounds complicated but at the end of the day the problem lies in getting the subfolder names, and since the image has the same name of the subfolder, apply it on the <img> tag and also on the button. All this, using JavaScript. If you know that some other language would work much better I'm open to suggestions, but I built the entire website until now only using JavaScript.
Anyways, I tried to express the problem the best I could so if something is unclear, I can easily modify the post if needed. Thanks in advance!
You could put the image data into a JSON object, then bind related processing functions according to the requirement.
In my app.js file I have classes that are data driven, such as text and picture classes. I have a hyperlink class for which I used Href that looks like this:
div class = "links" ng-if="field.fieldLink">
<a ng-if="content.LinkField.fieldLinkNewTab !== false" target="_blank"
ng-href="{{ content.fieldLink.fieldLinkHref }}">{{
content.fieldLink.fieldLinkText }}</a>
<a ng-if="content.fieldLink.fieldLinkNewTab === false" ng-href="{{
content.fieldLink.fieldLinkHref }}">{{
content.fieldLink.fieldLinkText }} </a>
</div>
So this way I can easily use it like this in my .JS file:
fieldLink
{
fieldLinkHref: "www.etc.com",
fieldLinkText: "click here for random website",
The problem that I am having is making a field for an image:
fieldLinkImage: "documents/pictures/etc.jpg"
fieldLinkHref: "www.etc.com",
Clicking the picture should redirect me to the url.
I can do this in my .html file just fine, by simply wrapping the image in the class, but I want to select the image in my .JS file.
How do I make this happen without hard coding the links and images in the .html file ?
Thank you!
Sorry about this but I will criticize your code a bit.
First to point out that you have a typo, LinkField should probably be fieldLink in your first <a> element.
Next, why are you comparing !== false when you can just check if var is true or truthy (just put variable in condition - no need to compare with anything - if it's there or is true it will be truthy).
Also to create a new element just because you need to have different attribute is bad, you will get tons of code and get lost at some point. Instead use ng-attr-target which will give you same thing in one line - puts target (or any other) attribute based on condition.
But all of that can be fixed of course, I will take a wild guesses on your data structure during this since you haven't provided jsfiddle or similar. I guess that you have a list of objects that hold images or links and you want to put them together in some ng-repeat based on the type either show link or image.
So this would be your data object:
let contentObj = [{
fieldLink: {
fieldLinkNewTab: false,
fieldLinkHref: "www.etc.com",
fieldLinkText: "click here for random website",
}
}, {
fieldLink: {
fieldLinkNewTab: true,
fieldLinkHref: "www.etc.com",
fieldLinkImage: "https://images.pexels.com/photos/590490/pexels-photo-590490.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb",
}
}];
and this would be your html, if fieldLinkText is there it will show text, if fieldLinkImage is there it will show image, keep in mind if you have both it will show both, also by utilizing power of ng-attr-target you show one element in html and not two with ng-if:
<div class="links" ng-repeat="content in contentObj" ng-if="content.fieldLink">
<a ng-attr-target="{{(content.fieldLink.fieldLinkNewTab) ? '_blank' : undefined}}" ng-href="{{ content.fieldLink.fieldLinkHref }}">
<span ng-if="content.fieldLink.fieldLinkText">{{ content.fieldLink.fieldLinkText }}</span>
<img class="image-class" ng-if="content.fieldLink.fieldLinkImage" src="{{content.fieldLink.fieldLinkImage}}" alt="" />
</a>
</div>
I hope this is helpful, I didn't mean to be too critic, if I was sorry about that, but these things will help you in future. And here's the fiddle that you can play on change your data tweak it up a bit: https://jsfiddle.net/pegla/j392Lvdp/3/
22I am preparing a website which will contain prices of products on couple pages. Sometimes the same products are on couple of pages (e.g. on the main page and the specific product page). What I'm trying to achieve is to have ability of using any sort of spreadsheet or any other type of document (another perhaps) to control prices of all items across the whole website. I believe every price must be indexed somehow so we know that in with id="product1" will be the correct price and different than in id="product2".
Currently I have the example code here:
<h3>Product 1</h3>
<div class="price">
<span id="product1">£55 per day</span>
</div>
<h3>Product 2</h3>
<div class="price">
<span id="product2">£20 per day</span>
</div>
etc...
Sorry for rather a 'question type' topic than the 'case type', but I was trying to find the solution already. I know it can be done in php, but I have no idea about php unfortunately. So anything in html / javascript will be handy. Thnx a lot for any help/advice.
use JSON, not XML It's not 2003. Your jquery would be:
var prices = $.get("prices.json")
var product;
$("h3").each.( function()
{
product = $(this).html();
$(this).next().children("span").html(prices[product]);
});
Assuming you have no other H3's on your pages, otherwise give each product ID 'h3' a class a la:
<h3 class="products">Product 1</h3>
and use $(".products") instead of $("h3").
You could also use a selector to pull the <div>'s by class, and fetch the child <span>'s id.
I would recommend storing the data in either a database or an xml file to be read by the website. That way it's a "change once" situation. However, the scope of what needs to be done is beyond what you'd find in a simple answer here.
Edit: Jquery is a client side language, which means that it will only change what's currently exposed to the client at that time. It does have the ability to read from an xml file, and use that data to populate the display. But that data does need to be stored externally for it to affect more than one page at the same time.
i am trying to use mustache.js to render some JSON in the browser.
What i want to do is:
<li>
<span class="label">Location: </span>
{{#locations}}
{{.}}<span class="social-small-size "></span>
{{/locations}}
</li>
The locations is a js array
[["Pendéli, Attiki, Greece", "facebook"], ["Greece", "linkedin"]]
Initially i tried to use {{%IMPLICIT-ITERATOR iterator=loc}} in my attempt to split the data in the view. So i the actual rendering code was
{{loc[0]}}<span class="social-small-size {{loc[1}}"></span>
But that did n t work altough the loop worked and i got 2 spans but without any content. I think the PRAGMA is what I need but I didn 't figure it out. Any hints ? :)
The answer is quite simple, do not use arrays in array. You should uses hashes.
The above code should work as
{{#locations}}
{{value}} <span class='social-small-size {{network}}'></span>
{{/locations}}