I am working on a login/register page and i forget that how can i insert a link on a image. Here is my code...
<div class="social-media">
<ul>
<li><img src="images/facebook.png"></li>
<li><img src="images/twitter.png"></li>
<li><img src="images/linkedin.png"></li>
<li><img src="images/instagram.png"></li>
</ul>
</div>
</div>
How can i insert a link....
You have to use the anchor tag <a> for links in HTML.
Since you want an image to act like a link, enclose the <img> tag in the <a> tag like so.
<div class="social-media">
<ul>
<li><img src="images/facebook.png"></li>
.....
</ul>
</div>
</div>
Related
I am trying to display custom images for my list of objects. The images are stored in the database as one of the properties on the object and returned to my template in the model.
<ul>
<li th:each="fruit : ${MyPage.fruitList}">
<div class="field" th:onclick="'javascript:doSubmit(\'' + ${fruit.guid} + '\');'">
<ul>
<li th:each="property:${fruit.fruitProperties}">
<div th:if="${property.propertyName}=='fruit_image'">
<img alt="fruit_image" id="fruitImage" th:src="${property.propertyValue}" style="width:100px;height:100px;"></img>
</div>
</li>
</ul>
<label th:text="${fruit.name}" class="radio-label"></label>
</div>
</li>
</ul>
With above code, I am able to successfully display the image that is stored as property 'fruit_image' on the fruit object in database.
Now the question I have is, how do I display a default image if the property 'fruit_image' is not present on the fruit? Is there a way i can set a flag or variable inside the 'if'?
Thank you!
No, there isn't a way to change a variable in Thymeleaf like that. That being said, you can use collection projection to check for the existence of that property. For example, this is how I would do a default image:
<ul>
<li th:each="property:${fruit.fruitProperties}">
<div th:if="${property.propertyName}=='fruit_image'">
<img alt="fruit_image" id="fruitImage" th:src="${property.propertyValue}" style="width:100px;height:100px;"></img>
</div>
</li>
<li th:unless="${#lists.contains(fruit.fruitProperties.![propertyName], 'fruit_image')}">
<div>
<img alt="fruit_image" id="fruitImage" src="DEFAULT-IMAGE.jpg" style="width:100px;height:100px;"></img>
</div>
</li>
</ul>
Rather than looping through all the properties, something like this could work for you as well.
<ul th:with="has_image = ${#lists.contains(fruit.fruitProperties.![propertyName], 'fruit_image')}">
<li th:if="${has_image}">
<img alt="fruit_image" id="fruitImage" th:src="${fruit.fruitProperties.^[propertyName == 'fruit_image'].propertyValue}" style="width:100px;height:100px;" />
</li>
<li th:unless="${has_image}">
<img alt="fruit_image" id="fruitImage" src="DEFAULT-IMAGE.jpg" style="width:100px;height:100px;"></img>
</li>
</ul>
I am trying to add a javascript image slider on a basic rails app. I added the JS file to assets/javascripts folder but my javascript is not executing.
I added my html file below. Can anyone one please tell me what am I missing?
<div class="slider">
<!-- Slideshow 3 -->
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 3
$("#slider3").responsiveSlides({
manualControls: '#slider3-pager',
});
});
</script>
<ul class="rslides" id="slider3">
<li>
<div class="banner">
<h1>What a beautiful bike</h1>
<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
</div>
</li>
<li>
<div class="banner banner2">
<h1>What a beautiful bike</h1>
<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
</div>
</li>
<li>
<div class="banner banner1">
<h1>What a beautiful bike</h1>
<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
</div>
</li>
</ul>
<ul id="slider3-pager">
<li><img src="assets/device3.jpg" alt=""></li>
<li><img src="assets/device2.jpg" alt=""></li>
<li><img src="assets/device1.jpg" alt=""></li>
</ul>
<div class="clearfix"> </div>
</div>
I'm building an application in Rails that allows the user to upload a photo and then select one of four overlays that eventually will be composited onto it with Paperclip.
I'm new to Rails and I haven't been able to figure out how I pull the ID of a HTML element and store it in my database - I have this code:
<div>
<span id="overlay"></span>
</div>
<div id="overlay-select">
<ul>
<li><img id="overlay1" src="<%= asset_path '/assets/overlays/pink1.png' %>" /></li>
<li><img id="overlay2" src="<%= asset_path '/assets/overlays/green1.png' %>" /></li>
<li><img id="overlay3" src="<%= asset_path '/assets/overlays/blue1.png' %>" /></li>
<li><img id="overlay4" src="<%= asset_path '/assets/overlays/orange1.png' %>" /></li>
</ul>
</div>
And what happens is the user clicks #overlay1 - 4, and that img is then cloned and inserted into the #overlay span. I need to be able to grab the ID of whatever img is present in #overlay when the user saves the entry, I've looked for solutions as I don't know where to start but have come up short so far - any help would be greatly appreciated!
Here you are facing two issues. You cannot just clone the image, because you are using an id on these images. IDs must be unique. If you just clone the image, you could run into all sorts of js trouble, where element targetting fails and such. With that said, you can get around this by using a data attribute. Sample below.
Your html would remain similar except for the ids.
<div>
<span id="overlay"></span>
</div>
<div id="overlay-select">
<ul>
<li><img data-overlayid="overlay1" src="<%= asset_path '/assets/overlays/pink1.png' %>" /></li>
<li><img data-overlayid="overlay2" src="<%= asset_path '/assets/overlays/green1.png' %>" /></li>
<li><img data-overlayid="overlay3" src="<%= asset_path '/assets/overlays/blue1.png' %>" /></li>
<li><img data-overlayid="overlay4" src="<%= asset_path '/assets/overlays/orange1.png' %>" /></li>
</ul>
</div>
Your js would be. Would recommend using javascript for this. Also you will need to use ajax to actuallly send this to the server, unless you plan to do it using a post, or get method.
function getImgId(){
//Data for span
var overlaySpan = document.getElementById('overlay'),
imgs = overlaySpan.getElementsByTagName('img'),
imgsLn = imgs.length,
relevantSrc,//filled with relevant image source
relevantID;//filled with id of elem
if(imgLn > 0){//If there are any images
relevantSrc = imgs[0].src;
//Data for imagelist.
var overlaySelector = document.getElementById('overlay-select'),
overlayImgItems = overlaySelector.getElementsByTagName('img');//Would be most efficient to use query selector but then browser support would be sacrificed
for(var i=0;i<overlayImgItems.length;i++){
var imgItem = overlayImgItems[i];
if(imgItem.src === relevantSrc){
relevantID = imgItem.getAttribute('data-overlayid');
break;
}
}
return relevantID;
}
I want to show a footer that contains a list with links, but when i add the links, the "li" becomes a button. How can i fix it?
Some code:
<div data-role="footer">
<ul data-role="listview">
<li>
<span>Google</span>
</li>
</ul>
</div>
Thanks!
Change your ul to data-role="none" , like this:
<div data-role="footer">
<ul data-role="none">
<li>
<span>Google</span>
</li>
</ul>
</div>
UPDATE:
You could try the following to get your desired style for the li while making it work like a link:
<ul data-role="listview">
<li style="cursor:pointer" onclick="window.location.href='http://www.google.com/'">Google</li>
</ul>
I'm new to jquery mobile and need some help to move further in my application
I used NAVBAR with two buttons view and two buttons are navigating fine and displaying different list views & when I click on list view item the page is navigating to another HTML page and displaying related data but the problem is I'm not able to view navbar in next page...
I want the navbar to be constant for all pages like tabgroup activity in android.
anyone please help me with good example and application or show me some good links to achieve this...
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar" id="nav1">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
<div class="ui-grid-but" id="list">
<div class="ui-block-a">
<a href="#lv1" data-role="button" id="button1" >
<img src="task.png" alt="Tasks" /></a>
</div>
<div class="ui-block-b">
<a href="#lv2" data-role="button" id="button2">
<img src="reminder.png" alt="Reminders" /></a>
</div>
</div>
<div class="def_content_div" id="dashboard">
<ul data-role="listview" data-inset="true">
<li>List View 1 </li>
<li><a href="#lv2" >List View 2</a> </li>
<li><a href="#lv3" >List View 3</a> </li>
<li><a href="#lv4" >List View 4</a> </li>
</ul>
</div>
<div class="content_div" id="deals">
<ul data-role="listview"data-inset="true">
<li> List View 5</li>
<li> List View 6</li>
<li>List View 7</li>
<li>List View 8</li>
</ul>
</div>
</div>
The best way to achieve this is to put your navbar inside a JQM header and use the same data-id for every header. i.e.
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
You have to include the above code snippet in every listview page. That will give the appearance of a constant fixed nav menu.
Here is an example as requested http://jsfiddle.net/codaniel/z5VYF/1/
I got the solution from http://jquerymobile.com/demos
According to codaniel's answer, we need to include the code snippet in every listview page.
And then, we need to add the following class to the "current" nav-button of every page.
class="ui-btn-active ui-state-persist"
For the first front page:
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
And the second page:
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>