<div> blocker for iframe content - html

I am building a page to bring attention to available parts and accessories for a product line that is otherwise burried in my web site. The parts diagrams and check-out feature is always in the same spot on the main portion of my web site, so I have put the part I need to display in an iFrame, limiting what is viewable. However, there is a single part that continues to display, as it is designed to float to the right side of the display window. Since iFrame is now the display window, this floating button is in the way. The web site I am working on is at the following address.
http://www.snoscoot.com/fcaccessories/hondapowerequipment/test.html
Here's a link to a screenshot pointing out what I need to be able to make disappear: http://i1193.photobucket.com/albums/aa354/pbucket10/buttontohide.jpg
The pages that are going to be displayed in that iFrame always have the "div" class of "newsletter". Is there is a way to block certain a certain div "id" or "class" from being displayed within an iFrame? No worries about me stealing content or copyright enfringement, this is my web site (actually owned by the company I work for; I'm their web/code monkey). Any help would be greatly appreciated; I've been wrestling with this one for a couple days now.

Using javascript, you could use:
function hideID(){
document.getElementById("WhateverIdYouWantToGetRidOf").style.display="none";
}

Related

wants that when I click on the any index hyperlink, then it is displayed on main description page

I have made an web page. There are two iframes
In it. First is of index and second one is description page. I want that when I click on the any index hyperlink, then it is displayed on main description page.
How it will be possible? please give me the HTML code
You can use a button and when clicking it, change the url of the iFrame using Javascript like this:
document.getElementById('iframe-id').src = newLink;
You can use the data-attribute to store the wanted link in your html.
In case you want to do that: It is not possible to react to things outside of an iFrame through an iFrame. So you cannot put a link in iFrame1 and have it reload iFrame2, because those are two different websites and don't see each other.
Now, idk what exactly you are planing to do, but I really hope, that you don't want to make your entire site like that. Using iFrames is really only useful for things like inserting widgets (like Codepen etc.), but should never be used to display information from your own site. If you don't want to copy your html for every site then use PHP. If you don't want to reload your entire webpage (which is pretty much never a problem) you can use AJAX-requests to load parts of your website. (Frameworks like React.js, Angular.js and Vue.js do that for you)

Pull portion of web page from a page hosted on another server

I'm working on a company site that's hosted on a separate server from the main site. So, for example, I'm working on guest.company.com, and the main company website is www.company.com, and the two sites are hosted on different servers (and different development solutions).
The project I'm working on has a copy of the css from the main site, and has a shared layout with html copied from the main site. This shared layout is used for the top and bottom (header and footer) of the site I'm working on. However, I don't want to use a copy of that layout and html -- I want to actually pull in the layout & css from www.company.com so that when a change is made to that content on www.company.com, it's reflected on guest.company.com.
So, for example, the bottom "footer" area of www.company.com is contained in a footer html tag, and I want to display that content on guest.company.com.
How can this be done in MVC4 EF?
There is no quick fool-proof way to do this.
The quick way to get the HTML is making a webrequest call from your code and get the html and take what you need from it (i.e. header and footer). Have a look at this msdn link for an example of how to perform this. With that, you don't need "the other side" to do anything.
Having said that, it's potentially more complicated than that. As mentioned in the comments, css path should be made absolute. But there could be images (both within html and css). Also, if header and footer run any javascript, they need to be included in the page as well. You could of course include every single JS file that is referenced in the www.company.com page but there are sometimes JS run on the page. Your webrequest call wouldn't run the JS. In order to make sure all the javascript is run and the FINAL HTML is produced, you can use PhantomJS.
As you have probably noted, it could turn into a lot of work depending on what's on the header/footer. In my experience, a potential solution would be to have an FTP location that www.company.com copies the header/footer and their assets in. You can pull it from there every 24 hours or something.

Is there a CSS element that will let me add a space?

I am at an impasse with this page I am trying to modify for my institution. The page is somewhat proprietary and not all of the files that comprise the page are accessible to me. The only things I can get access to are 5 different files called a stylesheet(naturally), a head, a top, a bottom, and a print
So this is the page:
http://s5-sandbox.parature.com/ics/support/default.asp?deptID=15028
The issue is that below the page where you have the 2 sections for "Viewed Most Popular Topics" and "Most Recent Topics", is that the words ViewedMost run on together. Additionally the number of views and the first word of the actual topic respective of the views run on together. For example, you'll see 3869What is my Blackboard Username and COM ID?
Given the pages that I have access to, none of them have the ID for that section declared in them. It is in some .ASP page on Parature's backend. I've contacted their support and put in a ticket and did not receive any resolution. I tried emailing someone directly and a man told me something ridiculous:
If you right click on the area and click inspect element you are able to add a space either behind “view” or in
front of “most”. Either works, I’ve tried them both. The same goes for the number and the article.
I already know full well how to use the Chrome inspector but what I told this gentleman was that I don't have access to the page to add a space nor do I even know if there is an element I can use to fix the formatting. I was hoping you guys would be able to see something I do not on the page that would allow me to create the space that I am looking to add.
Thank you all.
.item:after {
content: "\00a0";
}

how can I navigate to a new page without reloading part of the current page?

I have a mybb forum, and a plugin that adds a public/private chat to the bottom of the forum (it adds a div before </body>).
I would like to navigate the forum without reloading the chat.
In this question, Josh Stodola explains how to change the url.
In this question, there is a small JavaScript code to change the url.
I've also read about HTML5 iframes, but I still can't imagine how can I use it all together.
Should the chat be inside an iframe? an iframe inside the forum? should the forum be inside an iframe, and the chat into another? And those 2 iframes, inside a new page???
I'm messed up...
You should have a window containing chat and an iframe for your content. This will allow you to navigate your forum and only reload the iframe vs the top frame.
<body><iframe src="someurl"></iframe><div>Chat</div></body>
A few things to note: doing it this way will not change the address bar while you navigate and this makes users confused when they try to link to pages and it takes them to the home page or wherever they started browsing your forum.
If you want to do something more fancy checkout pjax. It will let you change urls for the whole page while only loading certain content.

Page url links to pages internal frame

I have a personal website, which I have made (to the best of my ability) without a template. I am not very experience in HTML so am not entirely sure if this is bad practice or not, but here is my issue.
My website consists of a frameset, which has 3 frames. Two do not change (banner and nav panel), and the other is content. The way I display my content in the main frame is through an iframe. Here's where the trouble comes. I have suggested my website to the crawler, and it crawls all the pages for content, of course. When I click on one of my links suggested by google (say, a project), the browser loads that individual .html file, without any of the rest of my frames. In other words, it does not link to the page through my index.html which sets up the formatting and page frames, but simply loads the html as a stand-alone page.
Is there a way I can avoid this, so that if a link for my website is clicked from an external link (not from my domain), the page first loads my index.html, and then the page of interest, so that it appears as if it were accessed normally from my index? I am not sure whether I should find a new way of displaying my content in the main frame so that it avoids iframes, or just need a simple script to redirect the user.
Not sure if it's useful but I've attached a photo of my page just to better explain what the frame layout is that I am working with.
Many thanks!!!
iFrames are definitely not the route to take when you are displaying consistent content... Which from what appears to be the Navigation, Header, and of course, the Content. Of course there will be an issue when a "Search Engine Spider" crawls your page... From my understanding, seeing as you are calling "content" from another page, the spider will crawl that page but will not crawl the index.html page we are currently viewing. When a "Spider" crawls a page it looks for STATIC HTML Tags/Content/Keywords/etc, and seeing as you are calling all of your content from other pages the "Spider" will treat that content as being on another page as well.
You want me recommendation? Avoid using an iFrame at all times. The point of an iFrame is to display content from another location (external), and or display static content on a page without having to scroll the current page you are viewing the iFrame on.
It is bad practice to use an iFrame, I would suggest using DIVs. Within these DIVs you may place content, images, links... Virtually anything you want, with all of the benefits of having people view your website, along with Search Engine Spiders.
I hope this helps!
Thanks,
Aaron
iFrames are a bad choice. AJAX is VERY simple these days. Just replace the big iFrame with a Div, and AJAX a page, putting the contents into that Div.
Replace your anchors with tags, and replace href with name, like so:
<div name='main.html' class='link' />
You need a div with the id 'loadHere':
Then include jQuery (it's pretty easy, google it) and at the end of your HTML put this:
$('.link').click(function(){
$.post(this.name,function(dat){
$('#loadHere').html(dat); }); });