I'm currently using the catalogTemplate and the first thing that is highlighted when the app launches is the first category, but I would like to change the focus to the first item in the first category, as clicking on a category does nothing.
<catalogTemplate>
<banner>
<img src="image.png" />
</banner>
<background>
<img src="img.jpg" />
</background>
<list>
<section>
<listItemLockup>
<img src="ImageThatIsHighlightedByDefault.png"/>
<decorationLabel />
<relatedContent>
<grid>
<header>
<description>description</description>
</header>
<section>
<lockup videoURL="VideoIWantToFocus.mp4" autoHighlight="true">
<title>title</title>
<img src="img.png" />
</lockup>
</section>
</grid>
</relatedContent>
</listItemLockup>
</section>
Use autoHighlight="true" to set the default item you want to present.
In your case, title will be first present as it has autoHighlight="true" in lockup.
Related
Why isn't my image showing up with the url I'm using? The url is valid and I used the same method to insert other images and it worked. First code is the url that isn't showing up and the other one are the images that are showing up. I have also included the images of what appears on the webpage for the unresponsive image as well as the responsive one.
<div>
<img src=”https://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
<h1 id="myname">John Smith</h1>
<h3>Web developer</h3>
<p>{{ pause and ponder }}</p>
</div>
</div class="intro">
<div class="project-grid">
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
</div>
I don't understand what the issue I did the exact same thing for both but only the second group of images is showing up on my webpage.
You've got special character quote marks instead of regular ones surrounding the src attribute.
Change the ” character to ". Most likely it was converted in something like Word or Outlook.
Fixed HTML:
<img src="https://via.placeholder.com/150/0000FF/808080" alt="Profile Pic" />
You used "https://...." for the profile picture, but if your development server is on "http://...", then the profile picture won't show up due to cross-protocol restrictions.
Change
<img src=”https://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
to
<img src=”http://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
I am trying to replicate the below html page using JSF. But can't find the correct JSF tag to do so.
HTML content (Required HTML):
<body>
<div class="image">
<img src="image.jpg" alt="Image" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="circle" id="circle" coords="135,596,34" href="http://www.google.co.in" alt="Circle" />
<area shape="rect" id="square" coords="192,567,249,628" href="http://www.youtube.com" alt="Square" />
</map>
</div>
</body>
JSF Page (JSF to be modified to get above HTML):
<body>
<f:view>
<h:outputText value="This is a JSF page"></h:outputText>
<br/>
<h:form>
<h:graphicImage id="image" value="image.jpg" usemap="true">
<h:commandLink action="#{managedBean.method}" id="links1" value="map1" coords="135,596,34" shape="circle"></h:commandLink>
<h:commandLink action="#{managedBean.method}" id="links2" value="map2" coords="192,567,249,628" shape="rec"></h:commandLink>
</h:graphicImage>
</h:form>
</f:view>
</body>
Please suggest the correct JSF format to replicate the above HTML page using the JSF page and it calls a method of ManagedBean when clicked on the link.
Let's say I have an embedded image in an HTML file using a data URI (e.g. <img src="data:image/png;base64,...." />.
Is there any way to show that image several times, with subsequent images referring to the initial one, without having to repeat the data URI? for example (though a bad one):
<html><head>...</head>
<body>
<p>Here's my car:</p>
<img id="img1" src="data:image/png;base64,..." />
<p>Some details about my car</p>
<p>Did I mention I just bought a car?</p>
<p>And here it is again:</p>
<img something_to_show_another_image_again="#img1" />
...
</body>
</html>
Seems a bit of an odd situation. Usually you would achieve this by having the image data in a separate file and then each image loading that source.
Ideally you would move the data to a separate file but if that's not an option maybe you could use the data-uri as a background image to each element? Failing that, you could use JavaScript to set the source of each image.
The following snippet includes examples of both.
var images = document.querySelectorAll("#JS img");
var src = images[0].src;
for (var i = 0; i < images.length; ++i) {
images[i].src=src;
}
#CSS img {
width: 20px;
height: 20px;
background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) center center no-repeat;
}
<div id="CSS">
<p>The image src is empty but the background is defined in the stylesheet:</p>
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
<hr />
<div id="JS">
<p>Here we use JavaScript to set the source of all these images to match that of the first:</p>
<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
Update...
Further to your updated question I've explored a JS solution that seems to meet your requirements (assuming JS is allowed):
(function linkAliasedImages(){
var aliasedImages = document.querySelectorAll("img[src*='#']");
for (var i = 0; i < aliasedImages.length; ++i) {
var aliasID = aliasedImages[i].src;
aliasID = (aliasID.substring(aliasID.indexOf("#")+1));
var source = document.getElementById(aliasID).src;
aliasedImages[i].src=source;
}
})();
<p>Here's my star:</p>
<img id="img1" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
<p>Some details about my star</p>
<p>Did I mention I just bought a star?</p>
<p>And here it is again:</p>
<img src="#img1" />
<p>And again:</p>
<img src="#img1" />
<img style="background: url(URI) repeat-x;width:100px;" />
Width have to be more than you're image width.
I want to change the contents of a div using a button click and in another click I want to bring back the old contenns to div I am using a image for button...
My div code is below
<div class="pic-container" style="position:absolute; left: 3px; top: 102px;">
<div class="pic-row" >
<img src="images/A.Png" />
<img src="images/B.Png" />
<img src="images/C.Png" />
<img src="images/D.Png" />
<img src="images/E.Png" />
<img src="images/F.Png" />
<img src="images/G.Png" />
<img src="images/H.Png" />
<img src="images/I.Png" />
<img src="images/J.Png" />
<img src="images/K.Png" />
<img src="images/L.Png" />
<img src="images/M.Png" />
<img src="images/N.Png" />
<img src="images/O.Png" />
<img src="images/P.Png" />
<img src="images/Q.Png" />
<img src="images/R.Png" />
<img src="images/S.Png" />
<img src="images/T.Png" />
<img src="images/U.Png" />
<img src="images/V.Png" />
<img src="images/W.Png" />
<img src="images/X.Png" />
<img src="images/Y.Png" />
<img src="images/Z.Png" />
</div>
</div>
<img style="position:absolute; left: 272.5px; top: 647px; width: 171px; height: 122.5px;" src="images/Btn_Lower.png" id="image1" />
Please help me to solve this issue
I don't want to confuse you by solving your problem, instead I would like to give you a short and simple example.
You can't achieve it by only using HTML you need javascript. So here is a way.
1) When you say content, it is referred as innerHTML in javascript.
2) I think you know about onclick, it is called click event. Similar to that you have a lots of different events in javascript for keypress, doubleclick, etc.,
3) Hope you know ID, called as unique selector. Other selector like class and you can HTML5 data-attributes.
4) To select an element, in JS you can use different methods like,
document.getElementById // select element based on Unique ID
document.getElementsByClassName // select element based on class
document.getElementsByTagName // select element based on Tag name
If you're insterested to learn more about javascript refers Mozilla Developers Network
Here is the shot example I would like to present to you.
HTML:
<div id="divd">First</div>
<button onclick='changeMe()'>Click It</button>
JS:
function changeMe() {
var div = document.getElementById('divd').innerHTML;
if (div === 'First') {
document.getElementById('divd').innerHTML = "Second";
} else {
document.getElementById('divd').innerHTML = "First";
}
}
Demo
I have the following HTML code in which the images can move.
<div id="templatemo_slider">
<!-- This is the container for the carousel. -->
<div id = "carousel1" style="width:960px; height:280px;background:none;overflow:scroll; margin-top: 20px">
<!-- All images with class of "cloudcarousel" will be turned into carousel items -->
<!-- You can place links around these images -->
<img class="cloudcarousel" src="images/slider/02.jpg" alt="CSS Templates 2" title="Website Templates 2" />
<img class="cloudcarousel" src="images/slider/02.jpg" alt="CSS Templates 2" title="Website Templates 2" />
<img class="cloudcarousel" src="images/slider/03.jpg" alt="CSS Templates 3" title="Website Templates 3" />
<img class="cloudcarousel" src="images/slider/04.jpg" alt="CSS Templates 4" title="Website Templates 4" />
<img class="cloudcarousel" src="images/slider/05.jpg" alt="Flash Templates 1" title="Flash Templates 1" />
</div>
<!-- Define left and right buttons. -->
<center>
<input id="slider-left-but" type="button" value="" />
<input id="slider-right-but" type="button" value="" />
</center>
</div>
For screenshot link actual :
I want to put webpages instead of images.
For that I have tried using
<iframe class="cloudcarousel" src="http://www.bookmyshow.com" width = "800px" height ="1000px"></iframe></a>
It shows the image, but is not properly aligned, after putting width in iframe the frame is moving to left and inside the page bookmyshow is coming incomplete"
Screenshot Link error: