I have a vertical left menu in my asp.net page.
using jquery .load,i try to load other aspx page in the midlle div(content div)
depending on the link click.Like this:
$('#LeftMenu1_HyperLink1').live("click", function(event) {
event.preventDefault();
$("#ContentDiv").load("mypage.aspx");
});
this solution doesn't work,i have followed the jquery doc.Do i should add some thing in mypage.aspx,all the examples i found i found googling don't work.
Can someone pls give me a working link or an example for that.
The best thing you can do (short of only responding with the requested content) is have a container in there, like this:
<div id="ContentDiv">
<div id="ContentInner">
</div>
</div>
This is to prevent multiple IDs in the page when doing the .load(). Since .load() takes a selector you'd then use that to get the content, like this:
$('#LeftMenu1_HyperLink1').live("click", function(event) {
event.preventDefault();
$("#ContentDiv").load("mypage.aspx #ContentInner");
});
Now this loads only that inner <div> onto this page.
Some considerations to this approach you're taking:
Scripts/styles in the <head> won't be loaded
Be sure your <form> is inside that <div id="ContentInner">
You're embedding a full HTML document into a <div> element. The result will look like this:
<html>
<head>
.
.
</head>
<body>
<div>
<html>
<head>
.
.
</head>
<body>
.
.
</body>
<html>
</div>
.
.
</body>
</html>
The browser won't be able to do anything with that. Try loading your page in an <iframe> element instead of a<div>.
Related
<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>
I have
<div class="ap-content" id="office-addon">
<div class="ap-iframe-container iframe-init" id="office-addon__5e83ed1">
<iframe id="office-addon__5e83ed1">
<!-- As it appears in the dev console: -->
#document
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="addon"></div>
</body>
</html>
</iframe>
<div>
<div>
I want to access it with nightwatch like so:
browser
.waitForElementPresent('#office-addon', 20000);
.frame('#office-addon iframe')
.waitForElementPresent('#addon', 1000)
.end();
But it times out waiting for #addon, though #addon is in the browser. How do I have to write the frame() parameters? The iframe id changes with every page build.
The solution was like following:
browser.getAttribute('#office-addon iframe', 'id', id => {
browser
.frame(id.value)
...
});
It didn't work directly.
If you want to select it by id, you probably ought to try a starts with selector like:
.frame("iframe[id^='office-addon']")
If it's always the nth iframe you can index in
// select the first iframe
.frame(0)
// go back to the original html content
.frame()
Iframes are elements to display another page, and it will not render any html written inside of it unless your browser doesn't support iframes. So that div with the id #addon is never being rendered in the first place.
I got a very strange problem with my website. It happens randomly Let me take an example of the main CSS file from my website
http://www.xxxxx.net/oxwall/ow_static/plugins/base/css/ow.css
which defines background image for alot of widget, for example
ow_console_lang_ai{background:url(images/flags/AI.png)
this one is correctly located at
http://www.xxxxxx.net/oxwall/ow_static/plugins/base/css/images/flags/AI.png
At runtime, ow.css is included by every single pages. And most of the time, things go smoothly, but sometime, (just sometime!!) all urls messed up. All images (by all, it is around 200-400 images) is appended to the resquesting url.
For examples: this one /oxwall/photo/useralbum/EltonJohn/109 may trigger 200+ requests of of wrong urls from ow.css:
/oxwall/photo/useralbum/EltonJohn/images/flags/GT.png
The number of images is huge that occupies all available process of my preforked Apache..
I have been googling for days. I thought it was mod_deflate but no... Any idea?
Try to add a slash:
Old code:
ow_console_lang_ai{background:url(images/flags/AI.png)
New code:
ow_console_lang_ai{background:url(/images/flags/AI.png)
Some you're sayin' when you write this /oxwall/photo/useralbum/EltonJohn/109 it's searching /oxwall/photo/useralbum/EltonJohn/images/flags/GT.png ? I'm not sure to understand
EDIT :
So i was thinking, if you call your css as before , but before your file you can externalize your specific class and put your relative url in javascript
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
height:100px;
width:100px;
}
</style>
<script>
var url = location.href;
</script>
</head>
<body>
<div class="test-image box"></div>
<script>
document.write('<style> \
.test-image { \
background-image:url('+url+'); \
} \
</style>');
</script>
</body>
</html>
This is not a best idea , but hope this help
Allan
Perhaps the problem is not the code but the picture.
Once I had a image that has a ".PNG"-ending and not ".png"-ending and my website doesn't load it.
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.