Develop Reference

JQuery Filer: Inserting download file link

I'm using the library JQuery Filer. It can upload files pretty well and can display the upload files.
I'm using templates to show the files icons (Like this example).
I tried put a link to download file by clicking over the icon. So I put the href for itemAppend template, but I need put the url.
<a href=" ? ">
<div class="jFiler-item-inner">
...
</div>
</a>
Because I retrieve a Json object like this:
{
"name":"appended_file.jpg",
"size":5453,
"type":"image\/jpg",
"file":"191a1a.jpg",
"url":"http:\/\/dummyimage.com\/720x480\/f9f9f9\/191a1a.jpg"
}
But I don't found a way to use a *fi-** personalized variable ti insert the url in href. I would like something like 'fi-url' to generate the link:
<a href='{{fi-url}}'>
<div class="jFiler-item-inner">
...
</div>
</a>
I think it would be a good feature. Anyone knows if JQuery filer allows personalized fi-* variables or there another method to put the link.
Thanks

How to load hyperlinked file to a targeted/certain a div dynamically?

I'm having a problem on how will I target, here's the scenario, whenever I click the links Home, or food or resort etc. the contents of it should be outputted on the display below. What always happen is that when I click those links It always goes to a new tab. What I wanted is that it should display on the same page and on a given div. Please help me, I've been trying to search the internet but different results are coming up.
Here are my links
<div id = "panel">
<p>
<a href = "home.html" target = "display">
<font color ="white">Home</font
</a>
<a href = "resort.html" target = "display">
<font color ="white">Resort</font>
</a>
<a href = "hotel.html" target = "display">
<font color = "white">Hotel</font>
</a>
<a href = "food.html" target = "display">
<font color ="white">Food</font
</a>
<a href = "rates.html" target = "display">
<font color="white">Rates</font>
</a>
<a href="reservation.html"target="display
<font color="white">Reservation</font>
</a>
<a href = "contact.html" target = "display">
<font color = "white">ContactUs</font>
</a>
</p>
</div>
This is where the content should be put in
<div id="display">
<iframe name="display"></iframe>
</div>

If I understand the question--and I really don't--I think you're problem is pretty easy to fix. Just change this:
<name = "display">
To:
<iframe name="display">
I'm assuming you want to load those links inside an iframe, yes? Otherwise what you want to do will require javascript. But again, I'm not sure I understand.
There is no <name> tag in HTML, but there is a name attribute
Edit to explain iframes:
iframes load one web page B inside of webpage A, but the two are still separate pages. The "box" is probably the border of the iframe itself. The scrollbar appears when the content of webpage B is too large for the iframe to display everything at once. To get rid of the scrollbar, you can either make the iframe larger or make the content of webpage B smaller.
Making an iframe larger is no different than making any other element larger: just change it's CSS.

I have tried this. Use this code <JsFiddle Link> :
At first load the jQuery:at the top of the code
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Then add this jQuery code at the bottom of the file. In this code you will just check when an anchor tag is clicked and then return false which will prevent the anchor tag click submission. As well as load function will load the desired file of the "href" attribute.
<script>
$("a").on("click", function(){
//alert($(this).attr("href"));
$( "#display" ).load( $(this).attr("href") );
return false;
});
</script>
NB: If you are running this in local server there is no problem. You also can load .php file in it. But if you are running it in Windows explorer or linux file system then open it in firebox.

yes crowhill is right. i think you want to have a single page website. then you have to write all the contents in a single html page with different divs for different contents which you want to display using the links and use the id of the divs in the href part of your tag (i.e. ).
i think this will clear your query.
https://www.freshdesignweb.com/free-one-page-wordpress-themes/

How to edit text for a link that does not have an ID using Javascript

I want to change the text of a link using javascript. The problem is this particular link does not have an id. I am unable to change the html, as this is a SharePoint page, and this particular link is created by a page layout, which I do not have access to. Using IE Developer Tools, I see that the HTML surrounding the link is this:
<span id="DeltaPlaceHolderPageTitleInTitleArea">
<span>
<a href="#ctl00_PlaceHolderPageTitleInTitleArea_ctl00_SkipLink">
<img width="0" height="0" style="border-width: 0px;" alt="Skip Navigation Links" src="" /></a>
<span>
<a title="State-Compliance" href="/sites/tax/Compliance/SitePages/State-Compliance.aspx">State-Compliance</a>
</span>
<a id="ctl00_PlaceHolderPageTitleInTitleArea_ctl00_SkipLink"></a>
</span>
The link I wish to change is the second one, the one with "State-Compliance" for the tooltip.
I looked at jQuery, and found I could use $('#DeltaPlaceHolderPageTitleInTitleArea').find("a").text("Test"); to change the text, but it changes the text of all three links. How can I change just the one? Do I need to iterate through the three, or is there an easier way of getting the link I wish to change?
Sorry if this is a stupid question, I'm a c# developer, and this is my first experience using javascript.
Let me know if you need more information.
Warren

Use .eq():
$('#DeltaPlaceHolderPageTitleInTitleArea').find("a").eq(1).text("Test");
jsFiddle example

How about this, using the attribute equals selector:
$('#DeltaPlaceHolderPageTitleInTitleArea a[title="State-Compliance"]')

Onclick view large image javascript or CSS3

I have code something like this
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
View Large Image
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
View Large Image
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
View Large Image
When we click on view large image link , Image should be display large and not disturb other images location.

http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.6.zip
PART 1 - GET SETUP
1.Download and unzip the Lightbox from above.
2.Look inside the js folder to find jquery-1.10.2.min.js and lightbox-2.6.min.js and load both of these files from your html page. Load jQuery first:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
3.Look inside the css folder to find lightbox.css and load it from your html page:
<link href="css/lightbox.css" rel="stylesheet" />
4.Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.
------------------------------------------------------------------------------------------
PART 2 - TURN IT ON
1.Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
image #1
Optional: Set the title attribute if you want to show a caption.
2.If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:
image #2
image #3
image #4

I am usually using the fancybox jQuery plugin for these purposes. You can use the old free 1.34 version for simple purposes too, no need for pro license. You can also find a lot of examples etc. on the linked site.

How to populate href value from src value of an image?

I know this is super simple, but I can't work it out (I'm a designer).
I want to simply populate the href attribute value of the <a> tag, with the value of the src attribute of the <img> tag. So the image links to itself basically.
the image src will be updated through a super simple CMS and I want the link to dynamically update, instead of the user having to update the URL also.
I tried something like this, but it didn't work.
<a rel="lightbox[job1]" href="()document.getElementById("gal1_img1").src">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>

You cannot inline JavaScript inside attributes the way you have currently. You can add a script to the page to do this:
<a id="link" rel="lightbox[job1]" href="#">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>
<script>
document.getElementById("link").href = document.getElementById("gal1_img1").src;
</script>

try this as your <a>'s href:
href="javascript:window.location=this.getElementsByTagName('img')[0].src;"
Assuming there's only ever one image inside these <a> tags, this should work for anyone who's NOT running with javascript disabled.

try this.
var att = $('#gal1_img1').attr('src');
$("a[rel*='lightbox[job1]']").attr('href',att);