I have page on my SharePoint site that has toolbar (call it toolbar page). All items/elements in that toolbar are actually links to offsite locations, that are not on SharePoint at all.
Toolbar page consists of two web parts both content editor web parts, one where toolbar is and the other where I intended to put iframe code. To be more clear, I want to see off-SP pages on my Toolbar page when I click on any element in toolbar but to still stay on same toolbar page (just to get web part load off-SP pages).
Example: Toolbar:
<ul>
<li class='has-sub'><a href='#'>Item 1</a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
</ul>
</li>
</ul>
iframe web part:
<script type="text/javascript">
function Navigate(file) {
document.getElementById('iframe1').src=file;
}
</script>
<iframe name="iframe1" id=iframe1 src="homepage link" width="1280px" height="1024px" scrolling="auto">
</iframe>
So my question is, can this code be edited so page can work correctly or what should I do to make it work? Any suggestion and help is greatly appreciated.
I finally found solution for this one.
In a tags person should just put target="optional word exp. MyFrame" after a href="#".
So it should look like this
<a href="#" target="MyFrame">
In iframe part of code just put
<iframe name="MyFrame" src="#"></iframe>
Related
I have a little problem there. I have accordion tabs with custom a tags. You can see the code below. I made a JS code to autoclick on different tab when the page is loaded. It works nice but it's scrolling down to the tab. I am not good in JS so I just come here to get help or advice. For me it will be better to not use "something a" but "#discussion" because there can be more tabs and I like to choose which tab will be autoclicked by the hash link not with "nth-child".
I can't use ID's on taband can't use jQuery (don't have permissions, just can use JS and adding code to body/head/footer)
Thank you! :-)
<div id="tabs-div" class="some-classes">
<ul id="tabs" class="some-classes">
<li class="ui-state-default ui-corner-top">
Description
</li>
<li class="ui-state-default ui-corner-top">
Discussion
</li>
</ul>
<div>
<script>
$link = $('#tabs li:last-child a');
$link[0].click()
</script>
functionality:
User clicks on the link in page A, it will prompt a pop-up. The pop-up is displaying separate web-browser thread which is an overlay over the page A which will turn opaque.
What has been done:
This is the code that has been done to enable to pop-up web browser:
$('link1').click(function() {
$('#subscribe-pop1’).toggle();
});
<div id="footleft">
<ul>
<li><a href="#" id='link1'>India, Mumbai</a>
</li>
<li><a href="#" id='link2'>India, New Delhi</a>
</li>
<li><a href="#" id='link3'>India, Chennai and Banglalore</a>
</li>
<li><a href="#" id='link4'>United Arab Emirates, Dubai</a>
</li>
</ul>
</div>
<div id="subscribe-pop1" style="display:none">
<iframe src="http://www.w3schools.com/js/">
</iframe>
</div>
Issue:
When I try to click on the link, it will only work for some of the url links. It will work if the url link is "http://www.w3schools.com/js/" but it may not work for "http://www.youtube.com".
It will only display a white screen for url that is not called.
I would like to know why is that so that the following href is only able to call on some url but not the rest and how am I able to rectify this issue?? thanks
I have created a one page website. When i click on menu it go to particular div tag. When I right click on menu & click on 'open in new tab' it opens url "www.mysite.com/#" instead it should open "www.mysite.com/#show-3".
Please help me with this......soon
/**************Script used to open Different menu div on page*********************/
$(".menu a").click(function(){
var id = $(this).attr('class');
id = id.split('-');
$("#menu-container .content").hide();
$("#menu-container #menu-"+id[1]).addClass("animated fadeInDown").show();
return false;
});
<div class="menu-wrapper">
<ul class="menu">
<li><a class="show-1" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">About Us</a></li>
<li><a class="show-2" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Rooms</a></li>
<li><a class="show-3" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Reservation</a></li>
<li><a class="show-4" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Gallery</a></li>
<li><a class="show-5" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Contact Us</a></li>
</ul> <!-- /.menu -->
</div>
This will work
<a target="_blank" href="yourlink">Link</a>
In your case
<div class="menu-wrapper">
<ul class="menu">
<li><a target="_blank" class="show-1" href="#">About Us</a></li> <li><a target="_blank" class="show-2" href="#">Rooms</a></li>
<li><a target="_blank" class="show-3" href="#">Reservation</a></li>
<li><a target="_blank" class="show-4" href="#">Gallery</a></li>
<li><a target="_blank" class="show-5" href="#">Contact Us</a></li>
</ul> <!-- /.menu -->
</div>
The "open in new tab" button in most browsers will follow standard hyperlink rules, meaning that they will open the href of the tag. A one page site usually manages all it's content with javascript and dynamic html generation. The open in new tab function doesn't know how to handle this.
What you are going to have to do is write routing and html generation logic, give all of your links actual href attributes, not just hashtags. For normal page navigation, you can return false whenever a user clicks on a link so that you can perform your normal one page logic, but when someone forces the browser to navigate to the href location (as in opening in a new tab), you will have an actual page with your div displayed there.
Please Try this fiddle
Demo
Just make minor change in your a tag
<a href="#" target="_blank">
You can give divs id:
<div id="show-1">About Us Content</div>
And create hyperlinks like:
<a class="show-1" target="_blank" href="yourPage.html#show-1">About Us</a></li>
This will open your div directly in new tab.
The thing about what you are trying to do is that, if you want to open just that particular div in a new web page, it isn't a 1 page site anymore. It is a NEW page with that div content.
Regarding your code, the
... href="your new page link here"
that " # " of yours is the link (or in a more technical term, it will append that link to your base url on your current page. Which resulted on
it going to "www.mysite.com/#" The reason why it shows the same page instead of just a new page is simply because # is not to link to a new page but to an element in your current page on any event (such as an onclick). You can get more details on that here
But like the other answers had mentioned, if you want to open a new tab (aka page), you have to have another page. Which also means this will no longer be a 1 page website.
I have multiple office websites that use the same navigational dropdown menu in the page header to allow site visitors to easily jump to another office website. I have designed the dropdown menu, but I am unsure how to approach the server side coding aspect so the dropdown menu knows what is the active office page the visitor is currently on. I have 3 office websites:
Office Location 1
Office Location 2
Office Location 3
My menu structure is: (also JSFIDDLE here)
<section id="ad_banner" class="container">
<div class="network">
<span class="abc_network">ABC Services</span>
<div class="dropdown" style="display:inline-block;">
Office Location 1 <i class="fa fa-caret-down"></i>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="1" href="index-header2.php">Office Location 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="1" href="index-header3.php">Office Location 3</a></li>
</ul>
</div>
</div>
Rather than having to update all the office pages manually when new office locations are added, I want to include the dropdown code into my office page template (I'll use a PHP include unless someone has another suggestion). I'm guessing I'll add a php variable at the top of each office location page like $page = "office location 1" and then add it to the global dropdown menu code somehow. I just don't know how to have the dropdown menu autoselect the page. Help!
I used an iframe to achieve this.
Edited: Here is the Fiddle: http://jsfiddle.net/yrf81u0c/5/
The iframe code:
<iframe src="#" width=100% height= 500px>
<p>Your browser does not support iframes.</p>
</iframe>
The Jquery:
$('a').click(function(event){
event.preventDefault();
var site = $(this).attr("href");
$('iframe').attr("src",site);
var value = $(this).text();
$("#top").text(value);
});
ok I am a bit rusty with jquery and new to jquery mobile so go easy on me ;). Ok I am creating a mobile website with jquery mobile and it has a lot of pages so rather than keep all the pages in one large multi-page template I have them in seperate page templates. I have a menu button that when clicked a popup appears with a listview menu in it, this works but I have to put the menu in every page template but I would rather just keep the menu in its own html file or even just somewhere in the dom that is outside the jquery mobile page structure so that I dont have to repeat the code in each page template.
How to I load the menu into the popup when its located in its own file? Failing that how do I load a div into that popup that is not inside a jquery mobile page?
My button:
Menu
my listview menu html:
<div data-role="popup" id="main-menu">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
Menu
</li>
<li data-theme="c">
<a href="#how-it-works" data-transition="slide">
How it Works
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/buy-now/levels.html" data-transition="slide">
Order Now
</a>
</li>
<li data-theme="c">
<a href="#faq" data-transition="slide">
FAQ
</a>
</li>
<li data-theme="c">
<a href="#help" data-transition="slide">
Help
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/support.html" data-transition="slide">
Support
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/" data-transition="slide">
Main Website
</a>
</li>
</ul>
</div>
In a general sense, here is how you can load html from an external file into a div, beyon that, I am not quite certain what you are trying to do exactly:
$('#myDiv').load('somepath/somefile.html');
I have the exact same problematic, I have written something that displays the popup but partially renders the CSS [edit] a few more tries and I was able to make it render CSS perfectly:
$('[data-role=page]').live('pageshow', function (event, ui) {
$('#'+event.target.id).find('[id=main-menu]').load('menu.html', function(){
$('#'+event.target.id).find('[id=main-menu]').trigger('create');
});
});
Btw your main html page should contain the div declaration:
<div data-role="popup" id="main-menu"></div>
Menu
And your menu.html should contain only what's inside the div:
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<!-- .... listview content ... -->
</ul>