<div class="card content-return">
<div class="card-image image">
<button id="favoriteBtn">Save2Favorites</button>
javascriptenter image description here
I’m a beginner and I’m having an issue getting my favoriteBtn to function when I click on it. Button doesn’t register in the console I get an error message in the console. What can I do? im using HTML and Javascript
So, the structure of a HTML page is that the code should be written in between <html> tags.
Even if the tags aren't written, the browser will still render the file. As shown below.
In the above picture, you can see that even if the code in the text editor is the one which you gave in your question the browser still generated the <html> and <body> tags. This maybe the error which you were talking about in your question. Nothing to worry.
Given the code from your question, we will need to have some JS (JavaScript) code for the button to function. And we will be calling that function in the onClick attribute in our HTML button. Refer the below image.
So, in the above code, we have added a method called saveFavorites() and we are calling it in our onClick attribute of our button.
Note - Ignore the yellow messages in the console, those are just warnings.
Posting the HTML Code Below -
<html>
<head>
<script>
function saveFavorites(){
alert("Button Clicked.");
}
</script>
</head>
<body>
<div class="card content-return">
<div class="card-image image">
<button onclick="saveFavorites()" id="favoriteBtn">Save 2 Favorites</button>
</div>
</div>
</body>
</html>
Related
I have a webpage that I want to pop-up a description in it. I've used rightJS light box 2.4.0. It works fine but the only problem is that it just shows a portion of my text. I have attached a sample file to check; As you can see it doesn't pop-up the whole text.
Any suggestions?
thanks
this is a sample code:
<!DOCTYPE html>
<html>
<head>
<title>RightJS: Lightbox</title>
<script src="right.js"></script>
<script src="lightbox.js"></script>
</head>
<body>
<div class="lower">
<a href onclick="Lightbox.show($("loremm-block").html()).resize({width:"20em"}); return false;">Link</a>
</div>
<div id="loremm-block" style="display:none;"> a very long text </div>
</body>
If you inspect Lightbox DOM via inspector in Chrome or Firefox you will see that it actually has the whole text inside the Lightbox but rui-lightbox-scroller has
overflow:hidden
CSS rule and it cuts off the text.
Play with width settings of Lightbox or try applying the following CSS rule to this element (rui-lightbox-scroller):
overflow-y:scroll;
The HTML structure is described in Style adjustments section where you can compare the DOM
I am trying to create an app for iPad, like iBook. I have loaded a ePub file in it and all is working fine.
I have written a CSS for the webview page. The following is my code to get page break
<span style="page-break-after: always" />
I have loaded a image, and some text below it. After the image I want the page break, and I want the image to be moved to the next page, but the page break code is not working. I'm not sure that my line of code is correct.
How about add a style definition like this?
<style type="text/css">
img.pagebreak {page-break-before: always;}
...
</style>
...
<body>
...
<img style="pagebreak" ...>
...
I have a (.xhtml) file that I need to access a particular <div> from my flash movie using Actionscript 2.0.
My (.xhtml) file is roughly in this format:
<html>
<head>
<title>Landing</title>
</head>
<div id="mainArea">
<div id="content">
<div id="calloutContent">
<div id="callout1">Search Our QA Database</div>
</div>
<div id="TitleContent">
<div id="title1">Heading One</div>
<div id="title2">Heading Two</div>
</div>
</div>
</div>
</body>
</html>
I need to access the value of <div "title1">, so that would be the text "Heading One", then I need to assign that to a variable in my flash move, then display it in a text field. I have looked at "XPathAPI", but I just cannot get it working, as the file is not pure XML.
I have looked at loading XML, and access nodes within that, which works fine, but when I try (.xhtml), in the format above, I just cannot get it to work.
Any help would be greatly appreciated. If you need any further information, please let me know.
Thanks, I am a bit desperate.
Alan...
Using meta tags you can send variables into a flash file when embedding the swf file onto a page... I don't remember how exactly but 1 quick google should reveal it... after that if the value int he div will be changing just use javascript to keep up with it.. or php..
I'm working on an MVC3 web application using the razor view engine. I'm looking for a solution to generate meta keywords and description automatically on my pages.
I've already found this solution here on stackoverflow, the idea is looking good. But since I'm planning to post blogs etc... on my website I want the meta keywords and description to be auto generated based on the content of the page.
Soo far I've got the following things in mind. Let's say that the current HTML looks like below;
<html>
<head>
</head>
<body>
<header></header>
<div id="container">
<div id="sideBar"></div>
<div id="pageHeader"></div>
<div id="content">
<!--This part contains the dynamic content-->
</div>
<div class="clear"></div>
</div>
<footer></footer>
</body>
</html>
The desired situation for me would be something like below;
<html>
<head>
#Html.MetaKeywords()
#Html.MetaDescription()
</head>
<body>
<header></header>
<div id="container">
<div id="sideBar"></div>
<div id="pageHeader"></div>
<div id="content">
<!--This part contains the dynamic content-->
</div>
<div class="clear"></div>
</div>
<footer></footer>
</body>
</html>
Said all this I've got the following questions left unanswered, hope someone can help.
The situation described above, with the HTML-helpers. Is this an good and logic approach to generate keywords and description on every single page, based on the content?
If this is, does anyone has experience and maybe an good example?
If not, are there any other good options? Other then using an attribute on each controller action? This still is an option, but it doesn't generate keywords an description based on my page content.
I hope someone can help me out. Thanks!
If I'm understanding correctly, you want to be able to auto generate the metadata based on the text inside the content div?
I would try passing that text / html / model into the MetaKeywords and MetaDescription functions, and allowing them to parse / analyze / look-up the information you need to put in the metadata.
<html>
<head>
#Html.MetaKeywords(Model.ContentText)
#Html.MetaDescription(Model.ContentText)
</head>
<body>
<header></header>
<div id="container">
<div id="sideBar"></div>
<div id="pageHeader"></div>
<div id="content">
<!--This part contains the dynamic content-->
</div>
<div class="clear"></div>
</div>
<footer></footer>
</body>
</html>
You should understand producing page content is the last stage of action processing, it performes directly to HttpContextBase.Response and generally server may never have whole content buffered, it may be sent to client due producing.
You may register your filter globally as described here http://weblogs.asp.net/gunnarpeipman/archive/2010/08/15/asp-net-mvc-3-global-action-filters.aspx so you don't need to put attribute on each action method.
On the _layout.cshtml you can add a #Rendersection("header", false) In the header section!! False for the time being.
Later you have to change this to true or remove the required attribute.
On each page you can use now
#section header{
<meta name="Author" content="1SeoAdvies.nl" />;
Here you add every desired meta tag.
}
beware you don't have meta tags in the header section on the _layout page.
i am using a slider js named as easySlider1.js for worspress. its working fine but till the time whole page is not fully loaded it show all the images of slider for a moment till the page is not loaded. as soon as page is fully loaded then it working fine.but it seems odd that it show all the images while page is in loading process. so please tell me how can i solve the problem. i want that all the images of slider should not show while page load. i try for it but cannot get the solution.so please tell me how can i solve the problem.
Thanks.
I don't know how the page looks like, but with the information you gave I came up with the following:
If the images are surrounded with a html-tag like div or p, then you can add css to hide the images while loading and show the images when the page is fully loaded.
If you have this:
<html>
<body>
<div id="image_gallery">
<img src="..." />
</div>
...
</body>
Then change it to this:
<html>
<body>
<div id="image_gallery" style="display:none;">
<img src="..." />
</div>
...
<!-- insert script just above the body endtag -->
<script type='text/javascript'>
jQuery('div#image_gallery').show();
</script>
</body>
jQuery must be loaded for this to work.