Hello Team,
How to create the simple widget like below,
The HTML Code is as below,
<div class ="c_full-d widget headlind_news">
<div class ="headlind_news--wrapper">
<header class = "headlind_news--titlex">
<a style="padding-top:5px" href="?">
<img src="icon_announcement.png" width="45px" height = "45px" role = "presentation">
</a>
</header>
<ul class="headlind_news--list"> </ul>
<marquee direction="left" scrollamount ="3">
"Thanks for creating a Marquee"
</marquee>
</div>
</div>
Can someone help me with the CSS script on how to define the class?
Or any help on creating the HTML Script for creating the below Widget inside which a text has to be scrolling from left to right?
Hi Siddhnath,
I got the below result using the below HTML and CSS. No idea why i don't get the images to be displayed.
Have uploaded the image in the image table.
HTML Script :
<div class ="c_full-d widget headlind_news">
<div class ="headlind_news--wrapper">
<header class = "headlind_news--titlex">
<a style="padding-top:5px" href="?">
<img src="icon_announcement.png" width="42" height="29"/>
</a>
</header>
<ul class="headlind_news--list"> </ul>
<marquee direction="left" scrollamount ="3">
"Thanks for creating a Marquee"
</marquee>
</div>
</div>
CSS Script :
.c_full-d widget headlind_news
{
background-color:#808080;
color:white;
margin:5px;
padding:5px;
}
.headlind_news--wrapper
{
background-color:#808080;
color:white;
margin:5px;
padding:5px;
}
.headlind_news--titlex
{
background-color:#808080;
color:white;
margin:5px;
padding:5px;
}
Any Suggestion on how to get the image ?
Hey Vidya,
<img src="icon_announcement.png" width="42" height="29"/>
This above code you have written & you are passing the image directly in src tag which is not allowed. Because src tag always contains The image with path of that image how ever you are passing only image not path of that image.
Here in ServiceNow, probably Images is stores in "db_image" table.
So to use the image you have to glide it first & then you can use it.
here is the demonstration of yout code only.
So whatever the Image you like to show remember that should be in the table & then you have copy the sys_id of that image & use that sys_id to glide the image.
Here is the code as well.
Html Script: This is your code only except src "plz refer the above image code because src binding will not show in below code I don't know why."
<div class ="c_full-d widget headlind_news">
<div class ="headlind_news--wrapper">
<header class = "headlind_news--titlex">
<a style="padding-top:5px" href="?">
<img src="{{data.image1}}" width="42" height="29"/>
</a>
</header>
<ul class="headlind_news--list"> </ul>
<marquee direction="left" scrollamount ="3">
"Thanks for creating a Marquee"
</marquee>
</div>
</div>
Server Script:
(function() {
var imageId = '1f4478ba5f130100a9ad2572f2b47768';
var gr = new GlideRecord("db_image");
gr.get(imageId);
data.image1=gr.getDisplayValue()
})();I hope you get the Image this time.
If the above code helps then please mark my answer Correct and Helpful.
Thanks and Regards:
Siddhnath Pandey
Hey Tried changing the code and it is working fine.
I Need one more help please
Is there any possibility to bring the Image and the Marquee text aligned in the same line?
Please let me know.
HTML Code :
<div class ="c_full-d widget headlind_news">
<div class ="headlind_news--wrapper">
<header class = "headlind_news--titlex">
<a style="padding-top:5px" href="?">
<img src="announcement.png" width="50" height="50" float="Natural" />
</a>
<ul class="headlind_news--list"> </ul>
<marquee behaviour ="scroll" scrollamount ="3" hspace=50 direction="left" onmouseover="this.stop();" onmouseout="this.start();">
Hover over and hold the mouse marquee stop
</marquee>
</header>
</div>
</div>
CSS Script :
.c_full-d widget headlind_news
{
background-color:#808080;
color:white;
margin:5px;
padding:5px;
height:30%;
}
.headlind_news--wrapper
{
background-color:#808080;
color:white;
margin:5px;
padding:5px;
}
.headlind_news--titlex
{
background-color:#808080;
color:white;
margin:5px;
padding:5px;
}
