if else statement - based on iFrame content? - javascript

I have a label in navigational breadcrumb:
<li>Eligibility</li>
Please keep in mind, i am very new learning .NET.
On this page there is iFrame content, where you click a link to view the respective content:
<ul id="ss-categories" >
<li class="eligibility">
<a href="#" onclick="ChangeFrame('mem_eligibility.aspx');")>Eligibility</a href>
</li>
<li class="deductible">
<a href="#" onclick="ChangeFrame('mem_deductible.aspx');")>Deductible</a href>
</li>
<li class="claims"><a href="#" onclick="ChangeFrame('mem_claims.aspx');")>Claims & EOBs</a href>
</li>
<li class="benefits">
<a href="#" onclick="ChangeFrame('mem_benefits.aspx');")>Benefits</a href>
</li>
<li class="hospital">
<a href="#" onclick="ChangeFrame('mem_priorAuth.aspx');")>Hospital Admissions</a href>
</li>
<li class="priorauth">
<a href="#" onclick="ChangeFrame('mem_Inpatient.aspx');")>Prior Authorizations</a href>
</li>
And the iFrame displays the content based on the link you click:
<iframe id="ctl00_middleContent_frame1" style="float:left" scrolling="auto" frameborder="0" height="400" width="100%" src="mem_eligibility.aspx">
In that navigational breakcrumb at the top, how would i code it so that it will change, based on the section of content displayed in the iFrame.
i.e. (in lehmans terms)
if iFrame src="mem_elibigility.aspx" {
document.write = 'Eligibility'
}
if iFrame src="mem_deductible.asps" {
document.write = 'Deductible'
}
Hope that makes sense, and yes i know my code is complete garbage... and is not structured right, but thats not my job at the moment...

Updated Version:
The following stores the urls that control your iFrame as title attributes and it uses jQuery to set the title of your "header" area. I tried to clean up a bit of the code as well, but this should work for exactly what you need:
jQuery (Example):
$(document).ready(function(){
$('#ss-categories li').click(function()
{
var test = $(this).text();
$("#title").text(test);
//Code to change iframe based on property of the item clicked goes here
var title = $(this).attr("title");
$('#ctl00_middleContent_frame1').attr('src', title);
});
});
HTML (Example):
<ul id="ss-categories" >
<li class="eligibility" title="mem_eligibility.aspx">
Eligibility
</li>
<li class="deductible" title="mem_deductible.aspx">
Deductible
</li>
<li class="claims" title="mem_claims.aspx">
Claims & EOBs
</li>
<li class="benefits" title="mem_benefits.aspx">
Benefits
</li>
<li class="hospital" title="mem_priorAuth.aspx">
Hospital Admissions
</li>
<li class="priorauth" title="mem_Inpatient.aspx">
Prior Authorizations
</li>
<li id="title" style="font-size: x-large; font-weight: bold">Eligibility</li>
<iframe id="ctl00_middleContent_frame1" style="float:left" scrolling="auto" frameborder="0" height="400" width="100%" src="http://www.google.com">
Try this demo to see if that is the functionality you want : Updated Demo
Older answer:
Is something like this demo what you are looking for?
Code:
$(document).ready(function(){
$('#ss-categories li').click(function()
{
var test = $(this).text();
$("#title").text(test);
//Insert logic here to change iFrame based on clicked item
});
});
It creates a function that will grab the "name" of one of your links in the list and it will display that in your "title" area. If I understood you correctly - I think this will do what you need.

Related

Add Active Class to Menu

I have a side menu and I want to display the active class when it loads the page.
The obvious answer would be to do this with jquery in every page but it repeats tons of code and it's boring.
So I used this in a app.js globally:
//Active side-menu
$('.nav-item').click(function () {
$(this).addClass('active');
});
But this doesn't work because it puts active and when it loads the page this class is removed after loading the html
What can I do?
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="general-setup" onclick="gitLabFetch()" id="createEnviromentTab">
<img src="../resources/img/icons/create-icon.png" alt="" class="menuIcon">
<span class="menu-title">Create Environment</span>
</a>
</li>
//A lot of li elements
<ul>
I think that on page load, you should get the url, try to find it on the menu with javascript and then add the active class to the nav-item, something like this:
$(document).ready(function() {
var url = window.location.pathname + window.location.search;
$('ul.nav a.nav-link[href="' + url + '"]').parent().addClass('active');
});
A little example, you might need to tweak the url part:
$(document).ready(function() {
var url = 'general-setup';//window.location.pathname + window.location.search;
$('ul.nav a.nav-link[href="' + url + '"]').parent().addClass('active');
});
.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="general-setup" onclick="gitLabFetch()" id="createEnviromentTab">
<img src="../resources/img/icons/create-icon.png" alt="" class="menuIcon">
<span class="menu-title">Create Environment</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="general-setup2" onclick="gitLabFetch()" id="createEnviromentTab">
<img src="../resources/img/icons/create-icon.png" alt="" class="menuIcon">
<span class="menu-title">Create Environment</span>
</a>
</li>
//A lot of li elements
<ul>
Ok, so after further thought i have come up with a solution.
An approach i would take is to add a data attribute to anchor onto, this gives you the freedom to define routes that your list items link to and style them accordingly based on route...
(() => {
$('li')
.filter((i, li) => $(li).data('route') === window.location.pathname)
.addClass('active')
})()
<li data-route="/">HOME</li>
<li data-route="/friends">Friends</li>
<li data-route="/profile">Profile</li>
<li data-route="/blog">Blog</li>
As you can see, i run over all the list-items and filter out all the items that do not have data-route attributes that match the window.location.pathname, after i am left with the filtered list, i apply an active class to the matched items.

How to expand certain part of a collapsible menu on page load based on a value

JSFiddle: http://jsfiddle.net/5qweu58f/4/
HTML (generated using XSLT):
<div id="dvExpProvHolder" class="hidOverflow innerDivCenter">
<ul class="uSPStyle" id="uSPStyle">
<li class="setRelative">
<a class="tfLink clickMe current" title="Care" data-toggle=".tfLink1" id="current" href="javascript:void(0);"><img src="theImages/imgMenu.png" id="imgFirstM" class="imgExpCol" />Care</a>
<ul class="uSPStyle uSPInner" style="width: 80%;">
<li><a class="tfLink clickMe" title="This is sub" data-toggle=".tf1SLink1" href="javascript:void(0);">This is sub</a></li>
</ul>
</li>
<li>
<a class="tfLink clickMe" title="Breast Cancer" data-toggle=".tfLink2" href="javascript:void(0);"><img src="theImages/imgMenu.png" id="imgFirstM" class="imgExpCol" />BC</a>
<ul class="uSPStyle uSPInner" style="width: 80%;">
<li><a class="tfLink clickMe" title="OUR LINK" data-toggle=".tf1SLink2" href="javascript:void(0);">OUR LINK</a></li>
</ul>
</li>
<li>
<a class="tfLink clickMe" title="About" data-toggle=".tfLink3" href="javascript:void(0);">About</a>
</li>
<li>
<a class="tfLink clickMe" title="Anxiety" data-toggle=".tfLink4" href="javascript:void(0);">Anxiety</a>
</li>
<li>
<a class="tfLink clickMe" title="Services" data-toggle=".tfLink5" href="javascript:void(0);">Services</a>
</li>
</ul>
</div>
Why doesn't the first UL lose the current class when another UL
is clicked? everything else works as expected.
The issue comes up when I would want the visitor to see BC > OUR LINK
section which shows "This is for second link sublink 1" without having to come to the page and then click on it. But because
they are all in one page, there is no way to do that out of the box.
I was wondering if there is a way to specify a query string in the
Url and use that to go directly to the sublink? For example:
http://www.myweb1.com/pages.aspx?id=098&menulink=2.1. The 2.1 would represent it is the second main menu and the first submenu. Is there
any way to incorporate that into my Jquery script?
Expanding on the examples from the authoritative question on the subject (How can I get query string values in JavaScript?) to solve this particular problem, you could use any of those methods for parsing window.location and taking action based on a query string parameter.
A working example is below, using a fake URL instead of window.location, as the snippet is in a sandboxed frame. This example uses URI.js, but there are many other options.
function log (o) {
var el = document.createElement('div');
el.innerHTML = o;
document.body.appendChild(el);
}
document.getElementById('button-1').onclick = function () {
log('Button 1 clicked!');
};
document.getElementById('button-2').onclick = function () {
log('Button 2 clicked!');
};
//Grab the "click" query string parameter. The button with the specified ID will be clicked.
//Using a fake URL instead of window.location inside this sandboxed frame
document.getElementById(URI('http://example.com?click=button-1').search(true)['click']).click();
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.16.1/URI.js"></script>
<button id="button-1">Button 1 - Auto-Clicked</button>
<button id="button-2">Button 2 - Not Auto-Clicked</button>

dynamically update breadcrumb & highlight active color

I am sorry for the title. I don't no how to write the title for the below scenario .
The below question would be easier for an expert. Kindly bear with my English.
I am creating a single page portfolio. In the web site I have top menu,breadcrumb,content & footer.
If i click any menu or submenu the corresponding div is loading properly but I want to change my breadcrumb dynamically based on the menu
Here is the HTML code for top menu
<div id="eyMenuNav">
<ul id="navmenu">
<li class="on">
<a class='link1' href="#first">Article on Technology</a></li>
<li>
<a class="sub" href="#">Success Stories</a>
<ul>
<li>
<a class='link2' href="#second" onclick="onctext();">Customer Quotes</a>
</li>
<li>
<a class='link3' href="#third" onclick="onctext();">CSS, Appreciation - Metrics</a>
</li>
<li>
<a class='link4' href="#four" onclick="onctext();">Lesson Learnt</a>
</li>
</ul>
</li>
<li>
<a class='link5' href="#five">Hexaware Key Contributor</a>
</li>
</ul>
</div>
Here is the HTML code for breadcrumb
<div id="eyBreadCrumb">
<ul>
<li>
<a id="crumb" href="#"><!-- Here I need update my breadcrumb based on the link which i clicked -></a>
</li>
</ul>
<!-- Clearing Element -->
<div style="clear:both;"></div>
<!-- end breadcrumb --> </div>
Here Is the code for javascript which i tried it is working for one menu click but i want for all.
function onctext()
{
document.getElementById("crumb").innerHTML="Success Stories - Customer Quotes";
}
Kindly help me for the above scenario
Note : I am not using jquery only iam working with javascript.
Thanks
Mahadevan
Add this parameter to your onctext() call, so your menu items look like so:
<a class='link3' href="#third" onclick="onctext(this);">CSS, Appreciation - Metrics</a>
And then change your onctext function to retrieve the text from this:
function onctext(elm) {
var text = elm.innerHTML;
document.getElementById("crumb").innerHTML = text;
// set active class
var active = document.getElementsByClassName('active')[0];
if (active) {
active.className = active.className.replace(' active', '');
}
elm.className += ' active';
}

photoswipe won't return to the original page

I am using photoswipe to show my gallery when clicking on a item.
My markup:
<ul id="gallery_mobile_about">
<li>
</li>
<li>
<a href="/files/uploads/Figues-de-Moro.jpg" style="background-image: url('/files/uploads/Figues-de-Moro.jpg');" data-iframe="" data-pos="1" data-url="/files/uploads/Figues-de-Moro.jpg" class="gallery-item ui-link">
</a>
</li>
<li>
<a href="/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg" style="background-image: url('/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg');" data-iframe="" data-pos="2" data-url="/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg" class="gallery-item ui-link">
</a>
</li>
<li>
<a href="/files/uploads/Deia-Church-on-Cala-rock.jpg" style="background-image: url('/files/uploads/Deia-Church-on-Cala-rock.jpg');" data-iframe="" data-pos="3" data-url="/files/uploads/Deia-Church-on-Cala-rock.jpg" class="gallery-item ui-link">
</a>
</li>
</ul>
The js:
$(document).ready(function(){
var myPhotoSwipe = $("#gallery_mobile_about a").photoSwipe(
{ enableMouseWheel: false ,
enableKeyboard: false }
);
});
The problem is that even that the gallery seems to load, as a backgound i see a white page with the text 'undefined' and on closing the galler page will stay as this white page (is not returning to the original view)
The result (hit on a image where it says 5 items in gallery): http://deia.info/m/?lan=2&task=view_post&catid=14&blogid=25
What am I seem to be missing here?
Adding rel="external" solved this
I allready have the attribute rel="external" and trying things this works for me.
var myPhotoSwipe = $("#Gallery a").photoSwipe({
//your others attributes
target: 'html'
});

item changing with fade in/out (jQuery)

I want to create a menu in my web page, where each list item is represented by image. When mouse point at some of these images, this image should fade out and be replaced by another image (I think fadeIn() would be useful).
HTML code:
<ul id="buttons">`
<li><a href="#" onmouseover="change(1)" onmouseout="ret(1)">
<img src="button01.png" id="button01_1" />
<img src="button01_hover.png" id="button01_2"/>
</a></li>
<li><a href="#" onmouseover="change(2)" onmouseout="ret(2)">
<img src="button02.png" id="button02_1" />
<img src="button02_hover.png" id="button02_2"/>
</a></li>
</ul>
jQuery - I´m new in using jQuery, I tried this, but there are many mistakes. Pictures are not changing properly - "fadeIn" picture changes position (every list item is absolutely positioned), and first image is disapperaing and appearing constantly. Here´s the code:
function change(i)
{
switch(i)
{
case 1:
$("#button01_1").fadeOut(500);
$("#button01_2").fadeIn(500);
break;
case 2:
$("#button02_1").fadeOut(500);
$("#button02_2").fadeIn(500);
}
}
(ret(i) is similar..)
Thanks for help..
You're nearly there but i can simplify:
<ul id="buttons">
<li>
<a href="#" id="link1">
<img src="button01.png" id="button01_1" />
</a>
</li>
<li>
<a href="#" id="link2">
<img src="button02.png" id="button02_1" />
</a>
</li>
</ul>
jQuery code:
$('#link1').hover(function(){
$('#button01_1').fadeOut(500).attr('src','button01_hover.png').fadeIn(500);
},function(){
$('#button01_1').fadeOut(500).attr('src','button01.png').fadeIn(500);
});
With the selectors you could remove the id button01_1 and replace the jQuery selector to $('img','#link') to accommodate.
sorry if I've used too much of the jQuery library than javascript.
Function explained:
$('#link1').hover(function(){ --initial function on hover-- },function(){ --coming out of the hover-- });
EDIT :
jQuery library : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Add the library to your html page
I think the problem is the fact that fading out an image also triggers a mouseout, (since it has display:none once the fade out completes), which in turn triggers a fade in, and so on. Consider rethinking your logic.
Updated:
use like this :
<ul id="buttons">
<li><a href="#" onmouseover="change($(this),1)" onmouseout="ret($(this),1)">
<img src="button01.png"/>
</a></li>
<li><a href="#" onmouseover="change($(this),2)" onmouseout="ret($(this),2)">
<img src="button02.png"/>
</a></li>
</ul>
jquery :
function change(elem ,i){
$(elem).find('img').fadeOut('500',function(){
$(this).attr('src','button0'+i+'_hover.png').fadeIn('2000');
});
}
function ret(elem ,i){
$(elem).find('img').fadeOut('500',function(){
$(this).attr('src','button0'+i+'.png').fadeIn('2000');
});
}
I hope that work ...

Categories

Resources