JavaScript - Multiple Onclick Conflict

I need help in creating a multiple value cookie when the user clicks the Add to cart input button. Here is the portion of code from the html page that creates the inventory item display and the Add to cart button. There are six of these on the page:

Code:

<div id="inventoryspread">

       <div class='productBoxInvUL'>
        <script type:"text/javascript">
		document.write("<img src="+"'"+"images/"+arrImage[0]+"'"+"align='left'/>"+
					   "<p><br/><span class='invName'>"+arrName[0]+"</span></p>"+
          				"<p>"+arrDescription[0]+"</p>"+
		  				"<p>Item#&nbsp;"+arrItem[0]+"<br/>"+
						"<span class='invPrice'>"+arrPrice[0]+"</p>");
		</script>
        <input type="button" value="Add to Cart" onclick='createCookie("name, value, 7", prompt("cookie created"))' />
        </div>

And here is a portion of the array that fills it:

Code:

var arrItem = new Array();
var arrName = new Array();
var arrDescription = new Array();
var arrPrice = new Array();
var arrImage = new Array();


arrItem[0]= "FE100";
arrName[0]= "Blacktop Jazzmaster";
arrDescription[0]= "Monster dual-bucker tone. Vintage style alnico humbucking pickup, single coil, skirted black amp knobs, and 3-way toggle switch. Alder body, Maple neck, Rosewood fretboard, 21 medium jumbo frets, gloss urethane finish and nickel/chrome hardware.";
arrPrice[0]= "$699.00";
arrImage[0]= "FE100.png";

arrItem[1]= "FE200";
arrName[1]= "Roland-Ready Stratocaster";
arrDescription[1]= "Time-tested Fender tone, timeless styling, 3 single-coil pickups, synchronized tremolo, high-mass bridge block, shielded body cavities and medium jumbo frets. Built-in Roland GK-2A pickup system, tinted neck, parchment pickguard and control knobs, and a '70s-style logo.";
arrPrice[1]= "$1,019.00";
arrImage[1]= "FE200.png";

arrItem[2]= "FA100";
arrName[2]= "CD220SCE Exotics ";
arrDescription[2]= "Exotic and beautiful with rich tone, laminated burl ash back and sides, with a solid spruce top. Fender-designed dreadnought body, X-bracing, and die-cast tuners. Cutaway body design with  rosewood bridge featuring a compensated bone nut";
arrPrice[2]= "$629.00";
arrImage[2]= "FA100.png";

arrItem[3]= "FA200";
arrName[3]= "Dick Dale Mailbu SCE";
arrDescription[3]= "Thin folk body design, laminated spruce top, laminated mahogany back and sides, scalloped X-bracing providing well balanced tone. Maple neck, rosewood compensated bridge and fretboard, vintage-style Fender tuners, and a surfin' red paint job on the top and back";
arrPrice[3]= "$849.00";
arrImage[3]= "FA200.png";

arrItem[4]= "FB100";
arrName[4]= "Standard Precision Bass";
arrDescription[4]= "Sound, look, and feel today's bass players demand. Classic P-Bass old-school design. Contemporary features and refinements. Alder body and a split single-coil pickup, this classic electric bass guitar lives up to its Fender legacy."; 
arrPrice[4]= "$579.00";
arrImage[4]= "FB100.png";

arrItem[5]= "FB200";
arrName[5]= "Roger Waters Signature Precision Bass";
arrDescription[5]= "Tastefully tailored, black-on-black color scheme, Seymour Duncan Basslines SPB-3 Quarter-Pound split-coil Precision Bass pickup, knurled black control knobs, brass nut, black bridge and strap buttons, vintage '70s-style open-gear chrome tuners."; 
arrPrice[5]= "$1,199.00";
arrImage[5]= "FB200.png";

arrItem[6]= "GE100";
arrName[6]= "Firebird X Limited Edition";
arrDescription[6]= "Turbo-charged Pure-Analog engine. Hand-applied and unique high-end wood finish. Beautiful, historical and yet contemporary and unique. Limited run of just 1,800 units. It is sure to become a collector classic.";
arrPrice[6]= "$5,569.00";
arrImage[6]= "GE100.png";

The cookie only needs to include the Item#, Name and Price of each item to populate a shopping cart page.

This is only a small student project and is client side only using javascript. Thank you for any help we can get on this.

Every time I try to use the notEmpty function with an onClick event, the validation stops working.

I also need to implement a pop-up that gives me this information - alert("Your name is"+firstname +lastname", your G.P.A. is "+gpa "your phone number is "+phone); anytime I try to use it as a function with onClick, it interrupts the validation as well.

Please help! I'm completely lost.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
      Date: 11/12/2014
      Filename: validator.html
      Supporting files: None
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validator</title>
<script type='text/javascript'>

function formValidator(){
	// Make quick references to our fields
	var firstname = document.getElementById('firstname');
	var lastname = document.getElementById('lastname');
	var gpa = document.getElementById('gpa');
	var phone = document.getElementById('phone');
	
	// Check each input in the order that it appears in the form!
	if(isAlphabet(firstname, "Please enter only letters for your first name")){
		if(isAlphabet(lastname, "Please enter only letters for your last name")){
			if(gpaValidator(gpa, "Please enter a valid G.P.A.")){
				if(phoneValidator(phone, "Please put a valid phone number")){
					return true;
				}
			}	
		}	
	}
	return false;
}

// Functions that check values in input fields!

function notEmpty(elem, helperMsg){
	if(elem.value.length == 0){
		alert(helperMsg);
		elem.focus(); // set the focus to this input
		return false;
	}
	return true;
}

function isAlphabet(elem, helperMsg){
	var alphaExp = /^[a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function gpaValidator(elem, helperMsg){
	var alphaExp = /^([0-3](\.\d\d?)?|4(.00?)?)$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function phoneValidator(elem, helperMsg){
	var alphaExp = /\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;

	}
}
</script>
</head>
<body>
<form onsubmit='return formValidator()'>
<fieldset>
<legend>Personal information:</legend><br />
First Name: <input type='text' id='firstname' /><br />
Last Name: <input type='text' id='lastname' /><br />
G.P.A.: <input type='text' id='gpa' /><br />
Phone Number: <input type='text' id='phone' /><br />
<input type='submit' value='Submit' />
</form>
</body>
</html>

My problem is that i have multiple math calculations within different functions that have multiple switch statements that get calculated with an onclick="functionOne()" for each radio button and before i can calculate the outcome for some reason i must fully insert a value for every input as well as check every raidio button before i get to the end of my list. I wish to simply allow the user to fill out as many fields as he wishes leaving some bank without being restricted to do every single one.. Thank you in advance

Hello,

I am using this code

Code:

<form style="display: none;" name="num1form" id="num1form" action="">
<input type="image" name="1" id="num1" value="1" src="imgl/img_first_01.png" onclick="document.forms[0].action='javascript:ChangeNum1();'"/>
</form>

What the above code does is change the action state, it allows me to have multiple image inputs which is great as I can define various inputs with different IDs.

However, this is used for one section of the page I happen to have another <form> with basically the same code but it's using num2 values, I'm not sure why but I can only using one of these Code:

onclick="document.forms[0].action='javascript:ChangeNum1();'"

at a time, for one form only.

Is there anyone able to help me divide this, or make these onClick actions unique so they can be used in more than 1 form?

Thanks,
Keenan

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

Heya there,

I have been trying to run two Javascripts within the same page.

The first is the Drop down menu Javascript, the second is the Picture Viewer (Click an image and it opens)


Here is a copy of the webpage (the active version has been modified to reduce confusion for users)

http://f1p.co.uk/saved%20pages/picture1.html



I have tried a noconflict, but it didn't seem to work.
As you can see, the Picture viewer works fine, but the drop down menu seems to be in conflict.

Any help please?

Hi Guys. I wish I could say I was a fellow coder but I'm not. I am a WYSISYGer that promised to help a friend and is lost. I'm making her a site that is based on a js template. I want to add a lightbox effect using jquery. Ive been trying to use a plugin called bumpbox because unlike lightbox it allows static html in the popup.

When I implement the plugin in a very basic html doc, it works just fine.

However when I use it in my js site, nothing happens.

I really really don't understand what I am doing right or wrong, so if someone could take a look at code and help me out (with very basic instructions), I'd really appreciate it!

Ive uploaded site to http://www.flashfollow.com/index.html
click home>link saying seo it should open a lightbox...currently to developers site.
THANKS SO MUCH

Id like to control scrolling of two divs with one scrollbar as in this example here

http://www.byenshjemmesider.dk/

At the same time i want to customize the scrollbar. Ive been using Flexcroll which work fine on a single div. But as soon as i insert flexcroll.js to head of document in the example, the sync of the two divs breaks and only the div with Flexcroll attached scrolls.

Anyone know how to solve this? You can find the code im using in the example or i can post.

I dont have to use Flexcroll, so if you know of any other application that can customize scrollbar and control scroll on two divs at the same time, id appreciate a link.

Hi,

I wonder if any one has any ideas in what is causing this bug in I.E

The main slide show is the javascript in question.

I think the javascript conflicting or causing this issue is the show hide with the plus minus at the top left of the page just above the navigation.

I think there is some Javascript conflict but it works sometimes and sometimes it doesnt.

http://tinyurl.com/6ee5yk2

thanking you in advance.

Hi!

I'm having problems with a thumbnail viewer. I have the Nivo slider installed in my website and now I added a thumbnail viewer called SmoothGallery and my Nivo Slider stopped working. They both are javascript. Once I added the source for the SmoothGallery in the header my Nivo Slider stopped working.

Here is the code I entered for the SmoothGalery plugin:

<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>
<script src="js/jd.gallery.js" type="text/javascript"></script>

Once that is entered, my Nivo slider stops working.

My nivo slider requires these libraries:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

Can anyone help me solve this issue? I am no expert on javascript and any help is appreciated!

hi guys! i was building a website using two jquery codes . first one for the slideshow banner and the other one for the menu but only one of them works, i've search on the web and i fouond something called jquery no conflict()
is this good?

this is the code inside de <head> tags
Code:

<!-- JavaScripts-->
<script type="text/javascript"> 
jQuery.noConflict();
</script>
/*This is the menu's*/
<script type='text/javascript' src="jquery-1.2.6.min.js"></script>
<script type='text/javascript' src="kwicks.js"></script>
<script type='text/javascript' src="custom.js"></script>
/*Here starts the sideshow*/
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
    });
</script>
</head>

Hi All,

I am simply trying to get 2 booking systems working on the 1 page but it seems that they have a conflict, they both access the exact sames files but whatever one is at the top get priority and works and the 2nd one below doesn't.

See he http://www.albergodelsenato.it/test2.php

How can I fix this?

Please help ASAP.

Thanks

Alright, I'm trying to get this website finished within the next 5 hours. I was designing it in such a way that I have some rollover buttons that take me to various parts of the site. Then, I have a gallery page, where I have a simple rollover galley.

Adding the rollover gallery has stopped my buttons at the top from working.

First, my .js file

Code:

function swap_image(name,source) {
    document.images[name].src=source;
    var argv=swap_image.arguments;
    if(argv[2] && argv[3] && document.getElementById) {
        element=document.getElementById(argv[2]);
        element.innerHTML=argv[3];
        }
    }
	
	

if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image0.src = '/images/male_fem.jpg';
image1.src = '/images/moon_wmn.jpg';
image2.src = '/images/mobydick.jpg';
} else {
image0 = '';
image1 = '';
image2 = '';
document.rollimg = '';
}

var cap = ['Picture One',
           'Second Picture',
           'Three'];

function rollover(n) {
document.rollimg.src = window['image'+n].src;
document.getElementById('caption').innerHTML = cap[n];
}

Now a portion of my html..

Code:

<a onmouseover="swap_image('gallery','/images/galleryro.jpg')" onmouseout="swap_image('gallery','/images/galleryhl.jpg')"> 
<img style = "top:150px; left:160px;" border="0" id="gallery" src="/images/galleryhl.jpg"/> </a>

<a href="timeline.htm" onmouseover="swap_image('timeline','/images/timelinero.jpg')" onmouseout="swap_image('timeline','/images/timeline.jpg')"> 
<img style = "top:150px; left:175px;" border="0" id="timeline" src="/images/timeline.jpg"/> </a>

<a href="biography.htm"onmouseover="swap_image('biography','/images/biographyro.jpg')" onmouseout="swap_image('biography','/images/biography.jpg')"> 
<img style = "top:150px; left:190px;" border="0" id="biography" src="/images/biography.jpg"/> </a>

<a href="contact.htm" onmouseover="swap_image('contact','/images/contactro.jpg')" onmouseout="swap_image('contact','/images/contact.jpg')"> 
<img style = "top:150px; left:205px;" border="0" id="contact" src="/images/contact.jpg"/> </a>

<div class = "lrgimg">
<p align = "center">
<img style = "top:150px" src="images/male_fem.jpg" width="auto" height="auto" border="0" alt="large" name="rollimg" />
</p>
</div>


<div class = "imgbar">
<p align = "center"><span onmouseover="document.rollimg.src=image0.src;">
<img style = "top:250px" src="images/male_fem_sm.jpg" width="32" height="32" border="0"alt="malefem"/> </span>

<span onmouseover="document.rollimg.src=image1.src;">
<img style = "top:250px" src="images/moon_wmn_sm.jpg" width="32" height="32" border="0" alt="moonwmn"/></span>

<span onmouseover="document.rollimg.src=image2.src;">
<img style = "top:250px" src="images/mobydick_sm.jpg" width="32" height="32" border="0" alt="mobydick"/></span>
</p>
</div>

</div>

Any help to quickly resolve the conflict, would be greatly appreciated. I don't have a lot of time.

I cannot get these two scripts to run seamlessly in one .html file. Here is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><head profile="http://gmpg.org/xfn/11">

<title>Supersized - Full Screen Background/Slideshow jQuery Plugin</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>

<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>

<script type="text/javascript" src="supersized.2.0.js"></script>
<script type="text/javascript" src="jquery-.js"></script>


<script type="text/javascript" src="accordion.js"></script>
<script type="text/javascript">
$(function(){
$.fn.supersized.options = {
startwidth: 640,
startheight: 480,
vertical_center: 1,
slideshow: 1,
navigation: 1,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 1,
slide_captions: 1,
slide_interval: 3000
};
$('#supersize').supersized();
});

</script>

<style type="text/css">

/* A few IE bug fixes */
* { margin: 0; padding: 0; }
* html ul ul li a { height: 100%; }
* html ul li a { height: 100%; }
* html ul ul li { margin-bottom: -1px; }

body {
padding-left: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #0C3;
}
#theMenu { width: 200px; height: 350px; margin: 0px 0; padding: 0; }

/* Some list and link styling */
ul li { width: 200px; }
ul ul li { width: 200px; margin-bottom: 0; }
ul ul li a { display:block; color: #fff; background: none; font-size: small; }
ul ul li a:hover { display:block; color: #fff; background: none; font-size: small; }
/* For the xtra menu */
ul ul ul li { width: 200px; margin-bottom: 0; }
ul ul ul li a { display:block; color: #fff; background: none; font-size: small; }
ul ul ul li a:hover { display:block; color: #fff; background: none; font-size: small; }


li { list-style-type: none; }
h2 { margin-top: 1.5em; }

/* Header links styling */
h3.head a {
color: #fff;
display:block;
border-top: 0px solid #36a;
border-right: 0px solid #36a;
background: none;
background-position: 98% 50%;
padding: 0px 0px;
}
h3.head a:hover {
color: #fff;
background: none;
background-position: 98% 50%;
}
h3.selected a {
background: none;
background-position:98% 50%;
color: #fff;
padding: 0px 0px;
}
h3.selected a:hover {
background: none;
background-position:98% 50%;
color: #fff;
}

/* Xtra Header links styling */
h4.head a {
color: #fff;
display:block;
background: none;
background-position: 98% 50%;
padding: 0px 0px;
}
h4.head a:hover {
color: #fff;
background: none;
background-position: 98% 50%;
}
h4.selected a {
background: #000 url(up.gif) no-repeat;
background-position:98% 50%;
color: #fff;
padding: 0px 0px;
}
h4.selected a:hover {
background: none;
background-position:98% 50%;
color: #fff;
}
a{
color:#8FC2FF;
text-decoration: none;
outline: none;
}
a:hover{
text-decoration: underline;
}
img{
border:none;
}
body {
overflow:hidden;/*Needed to eliminate scrollbars*/
background:#000;
}
#content{
margin:0px auto;
height:100px;
width:100%;
bottom:5%;
z-index: 3;
background:#262626 no-repeat 90%;
border-top:1px solid #000;
border-bottom:1px solid #4F4F4F;
position:absolute;
}
#contentframe{
overflow: hidden;
border-top:solid 1px #4F4F4F;
border-bottom:1px solid #000;
height: 100%;
text-align:left;
z-index: 3;
}
#slidecounter{
float:left;
color:#4F4F4F;
font:50px "Helvetica Neue", Arial, sans-serif;
font-weight:bold;
margin:18px 20px;
}
#slidecaption{
overflow: hidden;
float:left;
color:#FFF;
font:26px "Helvetica Neue", Arial, sans-serif;
font-weight:bold;
margin:33px 0;
}
/*Supersized Stamp*/
.stamp{
float: right;
margin: 25px 20px 0 0;
}
/*Supersize Plugin Styles*/
#navigation{
background: url('images/navbg.gif') no-repeat;
float: right;
margin:22px 20px 0 0;
}
#loading {
position: absolute;
top: 49.5%;
left: 49.5%;
z-index: 3;
width: 24px;
height: 24px;
text-indent: -999em;
background-image: url(images/progress.gif);
}
#supersize{
position:fixed;
}
#supersize img, #supersize a{
height:100%;
width:100%;
position:absolute;
z-index: 0;
}
#supersize .prevslide, #supersize .prevslide img{
z-index: 1;
}
#supersize .activeslide, #supersize .activeslide img{
z-index: 2;
}


</style>
</head>

<body>



<div style=" position: absolute; left:150px; top:80px; z-index:3">

<ul id="theMenu">
<li>
<h3 class="head"><a href="javascript:;">Competitions</a></h3>
<ul>
<li><a href="index-multi.php">Content 1 1</a></li>
<li><a href="index-multi.php">Content 1 2</a></li>
<li><a href="index-multi.php">Content 1 3</a></li>
</ul>
</li>
<li>
<h3 class="head"><a href="javascript:;">Residential</a></h3>
<ul>
<li><a href="index-multi.php">Content 3 1</a></li>
<li><a href="index-multi.php">Content 3 2</a></li>
<li><a href="index-multi.php">Content 3 3</a></li>
</ul>
</li>
<li>
<h3 class="head"><a href="javascript:;">Institutional</a></h3>
<ul>
<li><a href="index-multi.php">Content 3 1</a></li>
<li><a href="index-multi.php">Content 3 2</a></li>
<li><a href="index-multi.php">Content 3 3</a></li>
</ul>
</li>
<li>
<h3 class="head"><a href="javascript:;">HealthCare</a></h3>
<ul>
<li><a href="index-multi.php">Content 4 1</a></li>
<li><a href="index-multi.php">Content 4 2</a></li>
<li><a href="index-multi.php">Content 4 3</a></li>
</ul>
</li>
<li>
<h3 class="head"><a href="javascript:;">Photography</a></h3>
<ul>
<li><a href="index-multi.php">Content 5 1</a></li>
<li><a href="index-multi.php">Content 5 2</a></li>
<li><a href="index-multi.php">Content 5 3</a></li>
</ul>
</li>
</ul>


</div>

<!--Loading display while images load-->
<div id="loading">&nbsp;</div>

<!--Slides-->
<div id="supersize">
<a href="http://interfacelift.com/wallpaper_beta/details/1819/bird_on_a_branch.html"><img src="images/bird.jpg" title="Bird On A Branch"/></a>
<a href="http://interfacelift.com/wallpaper_beta/details/988/paradise_lost.html"><img src="images/paradise.jpg" title="Paradise Lost"/></a>
<a href="http://interfacelift.com/wallpaper_beta/details/1864/morelia_viridis.html"><img src="images/snake.jpg" title="Morelia Viridis"/></a>
</div>

<!--Content area that hovers on top-->
<div id="content">
<div id="contentframe">

<div id="slidecounter"><!--Slide counter-->
<span class="slidenumber"></span>/<span class="totalslides"></span>
</div>
<div id="slidecaption"><!--Slide captions displayed here--></div>
<!--Logo-->
<a href="http://www.buildinternet.com" class="stamp"><img src="images/supersizedblackmini.gif"/></a>
<!--Navigation-->
<div id="navigation">
<a href="#" id="prevslide"><img src="images/back_dull.gif"/></a><a href="#" id="pauseplay"><img src="images/pause_dull.gif"/></a><a href="#" id="nextslide"><img src="images/forward_dull.gif"/></a>
</div>

</div>
</div>

</body>
</html>

If I delete the following line:

src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

...the menu works perfectly, and if i delete the other jquery line:

<script type="text/javascript" src="jquery-.js"></script>

...the background images work perfectly. I cant get it to work. I feel like an f-ing idiot - Help!

Hi all,

I'm sure this issue/question has been raised many times but need some help.

I am trying to use two javascripts on one page but it doesnt seem to work, I can get one or the other but never both - believe this is whats know as a script conflict...
Now Im lost when it comes to javascript so have no idea how to solve the issue:
trying to use a vertical scroller on my images (this works) & would like to use a lightbox feature (that works when the above is removed)...

This is my test page that is using the troublesome scripts - http://www.liam-sheridan.co.uk/portfolio_lightbox.html

How can I solve this and use both features?

thanks LiamS