This topic may have lots of code out there, BUT I seem to be looking for a variation that isn't based on history, is it possible...
So I have this code...
<script type="text/javascript">
var pages=new Array();
pages[0]="listItem1.html";
pages[1]="listItem2.html";
pages[2]="listItem3.html";
pages[3]="listItem4.html";
pages[4]="listItem5.html";
var i=0;
var end=pages.length;
end--;
function changeSrc(operation) {
if (operation=="next") {
if (i==end) {
document.getElementById('the_iframe').src=pages[end];
i=0;}
else {
document.getElementById('the_iframe').src=pages[i];
i++;}}
if (operation=="back") {
if (i==0) {
document.getElementById('the_iframe').src=pages[0];
i=end;}
else {
document.getElementById('the_iframe').src=pages[i];
i--;}}}
</script>
</head>
<body>
<ul id="menu" role="group">
<li>Welcome
<ul>
<li>Ease of Access Center</li>
</ul>
</li>
<li>Getting Started
<ul>
<li>Considerations</li>
<li>Changing Perspective</li>
</ul>
</li>
</ul>
<iframe id="the_iframe" scrolling="no" src="listItem1.htm" name="ifrm" style="width:540px;></iframe>
<input type="button" onClick="changeSrc('back');" value="Back" />
<input type="button" onClick="changeSrc('next');" value="Next" />
and if I click on the next or prev button, it does move somewhere,but...
let's say my iframe is showing listItem2, then I click on listItem4 in the menu (there is a tree menu involved), then I want to go to listItem3 and I hit the back button...instead of going to listItem3, it goes to listItem2 (or someplace that is not back a page from 4 to 3).
It appears that the buttons are navigating based on history?...but I just want a straight forward or backward movement...I don't want my buttons to have this browser-type functionality...If I'm on listItem4 and hit the next button, I want it to go to listItem5.
Many Thanks For Any Help!
Okay, I'll try the code, but don't down-rate it if its off.
This is the function that you could put before the changeSrc function:
function UpdateI(value) {i = value}
This the one click event that you would add to your links in the a tag. Off course, the 4 that is sent the function in this case, would be changed to whatever is appropriate for whatever ListItem is being referenced:
onClick ="UpdateI(4)"
Does this help you?
I don't understand your code here:
document.getElementById('the_iframe').src=pages[i];
i++;
If that is going to advance to the next element AND display it, you need to increase i first. Perhaps I'm just missing something, though.
I think your problem is that if the user clicks one of your direct links, rather than "next" and "previous" i in your code is not getting updated. So if your on page 2 and click the link for 4 and then click back, i is currently 2 and not 4. Hope that helps you. Be sure mark it as the answer if it does.
add an on click event to each of the link tags that would call a single function just like you have in the input tags. Have the function take an input of some number and assign that number to i. That should do it. Sorry I cant show any source code, JAVASCRIPT is not my language. I can read it but I wouldn't dare to write code from scratch. Hope this helps you.
Related
I'm trying to click the "Visit" button here:
<a name="claim" href="#" onmousedown="$(this).attr('href', '/sdf/view.php?dsg=45368');"
class="btn-small larg-btn">Visit<i class="fas fa-eye" aria-hidden="true"></i></a>
There many other buttons (same but with different links) on the page, but I need to click only 1 (first link in a row) each time I visit/load the page.
Tried to combine those two solutions (1 and 2) but unfortunately I'm absolutely dumb in it:-)).
Also tried the simpliest thing which works in most cases
(function (){
document.querySelector('selector').click();
But obviously didn't help at all.
Thank you.
The link in your example doesn't have the correct href therefore click() wont have the desired result.
Method 1:
Get the link e.g. querySelector()
Simulate mousedown on the link so page JS changes the URL
Click the link
Method 2:
Get the link e.g. querySelector()
Get the onmousedown attribute
Get the final URL from the above attribute using Regular Expression
Assign the URL to the link
Click the link or open using GM_openInTab/GM.openInTab
Method 3: (not recommanded)
Get the link e.g. querySelector()
Get the onmousedown attribute
Use eval() to run the onmousedown JS on the link
Click the link
Here is an example of the method 1 using CustomEvent()
// get the link using the correct query
const a = document.querySelector('a.btn-small');
if (a) {
// simulate mousedown
const event = new CustomEvent('mousedown');
a.dispatchEvent(event);
console.log(a.href); // not needed, for debuggin only
a.click();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a name="claim" href="#" onmousedown="$(this).attr('href', '/sdf/view.php?dsg=45368');"
class="btn-small larg-btn">Visit<i class="fas fa-eye" aria-hidden="true"></i></a>
Using GM.openInTab
const a = document.querySelector('a.btn-small');
if (a) {
const event = new CustomEvent('mousedown');
a.dispatchEvent(event);
GM.openInTab(a.href)
}
I want to create some link buttons that change each others css styling upon being clicked. I found some tutorials on how to do this, which halfway works as shown in this fiddle;
http://jsfiddle.net/6m3rb/23/
<a id="btn1" class="btn" href="#" onclick="btn2.style.background='#007eff'; this.style.background='#9a3e01';">Button 1</a>
<br /><br />
<a id="btn2" class="btn" href="#" onclick="btn1.style.background='#007eff'; this.style.background='#9a3e01';">Button 2</a>
The only problem is that when the link is clicked and the page is loaded, the css-styling of the link resets back to normal, but I want it to keep the styling until the other link is pressed.
As fare as I can imagine, I need to use some javascript to handle this effect, however, javascript isn't the area where I am strongest when it comes to the internet.
Kind regards
Neros
What you will want to try is using jQuery, it is a already predifned library of actions. For this situation you will want something in the .css() section here. http://api.jquery.com/css/
Your code would look something like this
$('#btn1').on('click', function(e){
e.preventDefault(); // In this case I am preventing the link from firing you do not need this if you want to trigger the link, also remove e from your function parameters
$('#btn2').css('background-color': 'red');
});
You can use JavaScript with JQuery (which is easier to use than pure JavaScript). Then you can call a function with the onclick event.
HTML:
<a id="btn1" class="btn" href="#" onclick="changebtn2()">change color of the second button </a>
<a id="btn2" class="btn2" href="#">will change color if you click on the first button </a>
and make sure you also declare the JQuery library in the HTML.
JavaScript:
function changebtn2(){
$("#btn2").removeClass("btn2"); //remove the old class
$("#btn2").addClass("btn2change"); //add the new class with a different color
}
CSS:
.btn2{
color: red;
}
.btn2change{
color: green;
}
Just replace the href="#" with void
Button 1
this void function will stop the browser from passing any query as a request.
I've solved this problem myself.. I already had the same function on a unordered list, so I simply added the buttons within this list.
I'm just beginning to experiment in Angular, and confused about how best to approach binding using ng-repeat. I basically get the point about ng-repeat creating a child scope. My problem is much more basic :) For html like this:
<div ng-controller="swatchCtrl" class="swatch-panel">
Swatches
<ul>
<li ng-repeat="swatch in swatchArray" class="swatch">
<input
type="radio"
name="swatches"
ng-model="$parent.currentSwatch"
value="{{swatch}}"
>
<label class="swatch-label">
<div class="swatch-color" style="background-color: #{{swatch.hexvalue}};"></div
><span class="swatch-name">{{swatch.colorName}}</span>
</label>
</li>
</ul>
currentSwatch is:
<pre>{{currentSwatch | json}}</pre>
currentSwatchObj is:
<pre>{{currentSwatchObj | json}}</pre>
how do I tell this to fire??
swatchArray is:
<pre>{{swatchArray | json}}</pre>
</div>
and javascript like this:
function swatchCtrl($scope) {
$scope.swatchArray = [
{colorName:'Red', hexvalue: 'ff0000', selected: 'false'},
{colorName:'Green', hexvalue: '00ff00', selected: 'false'},
{colorName:'Blue', hexvalue: '0000ff', selected: 'false'}
];
$scope.currentSwatch = {};
}
http://jsfiddle.net/8VWnm/
I want to:
a) When the user clicks on a radio button, I want it to set both the colorName and the hexvalue properties of the currentSwatch object. Right now the binding seems to be giving me a stringified object from the array. How do watch the return of currentSwatch so I can parse it back to an available object? Simple, I know, but what am I missing?
b) When the user clicks on a radio button, I think I want that to set the value of the corresponding "selected" key in the original array to "true". Vice versa for unchecking. Let's say that only one swatch can ever be selected at a time in the palette. (I would like in theory to be able to iterate through the array later on, on the supposition that the different keys and values are likely to sometimes not be unique.)
This kinda stuff is super easy with jquery methods, but I'd like to learn the idiomatic angular way. Thanks in advance for any help.
http://jsfiddle.net/8VWnm/54/
Instead of listening to the ng-click event I would set the index of the selected element to a variable called "currentSwatchIndex"
<li ng-repeat="swatch in swatchArray" class="swatch">
<input
type="radio"
ng-model="$parent.currentSwatchIndex"
value="{{$index}}"
>
</li>
The you can $watch value changes of the currentSwatchIndex in your controller and set the selected swatch-Object and selection states in this $watch function:
$scope.$watch('currentSwatchIndex', function(newValue, oldValue) {
$scope.currentSwatchObj = $scope.swatchArray[newValue];
$scope.swatchArray[newValue].selected = true;
$scope.swatchArray[oldValue].selected = false;
});
Only knowing the currentSwatchIndex should be enough to identify the selected swatchObject. So probably you can get rid of the currentSwatchObj and the selected property of your swatchArray.
You can always get the selected swatch programmatically through a array access.
For future users that can come here to do the same in a select, you don't need use any index, the select must be done like this:
http://docs.angularjs.org/api/ng.directive:select
I'm a developer of 5 years, so I am no stranger to asp.net, but I am new to JQuery and JSON, so maybe that's why I'm not getting it. I followed the tutorial here about how to successfully login with facebook, and it works!
http://www.codeproject.com/Articles/450535/Using-Facebook-login-in-ASP-NET-application-withou
but my problem is that I am making a "comments" system on my site, and I want to user to type in their comment, then right below it click the "login with facebook" button, then when it successfully logs in, have it append the comment to the list of comments.
My only problem is I don't know how to get the Login to trigger C# code on the server side. Am I missing something here in order to hook into the "login successful" event of facebook?
I suspect it has something to do with these lines of code here:
enter codedd here
// This method will be called after the user login into facebook.
function OnLogin(response) {
if (response.authResponse) {
FB.api('/me?fields=id,name,gender,email,birthday', LoadValues);
}
}
//This method will load the values to the labels
function LoadValues (me) {
if (me.name) {
document.getElementById('displayname').innerHTML = me.name;
document.getElementById('FBId').innerHTML = me.id;
document.getElementById('DisplayEmail').innerHTML = me.email;
document.getElementById('Gender').innerHTML = me.gender;
document.getElementById('DOB').innerHTML = me.birthday;
document.getElementById('auth-loggedin').style.display = 'block';
}
}
or here:
<div id="fb-root"></div> <!-- This initializes the FB controls-->
<div class="fb-login-button" autologoutlink="true" scope="user_birthday,email" >
Login with Facebook
</div> <!-- FB Login Button -->
<!-- Details -->
<div id="auth-status">
<div id="auth-loggedin" style="display: none">
Hi, <span id="displayname"></span><br/>
Your Facebook ID : <span id="FBId"></span><br/>
Your Email : <span id="DisplayEmail"></span><br/>
Your Sex:, <span id="Gender"></span><br/>
Your Date of Birth :, <span id="DOB"></span><br/>
</div>
</div>
any clues or help would be greatly appreciated. I'm a very long time lurker (maybe 10 years?) , first time poster.
This is the first thing that comes to my mind it is not a perfect solution but it might work in this scenario. In short trigger a PostBack with a dummy button clicking it with Javascript at the correct place(not by user's click).
1) Put an asp.net button (runat=server) somewhere on your page. It will be a dummy button just to trigger a postback so make its width = 0 or something like that. Lets call it btnDummmy. Make ClientIDMode=static.
2) Attach a server side event to btnDummy. Put your server-side comment save logic there. The comment should be in a asp.net textbox (runat=server).
3) Put btnDummy also in an updatePanel. (So that you do not lose the span values, displayname, FBId, blabla)
4) When you login with Facebook at the end of LoadValues(me) before returning call btnDummy.click();
This should do the trick...
I am using select2 on dropdownlist of asp.net. The code is as follows:
<script type="text/javascript" src="js/select2.min.js"></script>
<link type="text/css" rel="Stylesheet" href="css/select2.css" />
var v = /* get the select control */
v.select2();
The problem is, once select2() function is called, tab ordering stops working. Therefore, when on the dropdownlist tab key is pressed, focus do not move to the control having next highest tabindex but move seemingly randomly to some other control.
Commenting the line where the function is called solve this problem but I need the filtering. I have tried some of the other techniques of filtering discussed here but they are too complicated. Select2 is very simple and useful because all you have to do is include the JS and CSS files and call the function.
How can I solve this ordering problem? Alternatively, is there another filtering option as easy to use as select2 that would help me?
After a few hours of struggle, I have solved the problem. It turns out that the select2 AJAX control do destroy the tab order if the tab is pressed as soon as it gets focus, that is, when nothing is typed in it. It does not, however, destroy tab ordering if some text is typed.
The internal structure of select2's auto-generated HTML is like following:
<div class="select2-container">
<a class="select2-choice">
<span</span>
<abbr class="select2-search-choice-close" />
<div> <b></b> </div>
</a>
<div class="select2-drop select2-offscreen">
<div class="select2-search">
<input class="select2-input select2-focused" tabIndex=<somevalue> />
</div>
<ul class="select2-results></ul>
</div>
</div>
If some text is typed in the HTML select control, then tab ordering is working correctly, if no text is typed then tab order is destroyed. I have used document.activeElement in firebug to find focused control in both cases. In case of no text the anchor element has focus, and in case of text typed the HTML input element has focus.
As shown above, while select2.js correctly set tabIndex property of HTML input element, it does not of the anchor element.
Solution
Just add the following line at the position specified further below in select2.js:
this.container.find("a.select2-choice").attr("tabIndex", this.opts.element.attr("tabIndex"));
Add the line after:
this.opts.element.data("select2", this).hide().after(this.container);
this.container.data("select2", this);
this.dropdown = this.container.find(".select2-drop");
this.dropdown.css(evaluate(opts.dropdownCss));
this.dropdown.addClass(evaluate(opts.dropdownCssClass));
this.dropdown.data("select2", this);
this.results = results = this.container.find(resultsSelector);
this.search = search = this.container.find("input.select2-input");
and before:
search.attr("tabIndex", this.opts.element.attr("tabIndex"));
this.resultsPage = 0;
this.context = null;
// initialize the container
this.initContainer();
this.initContainerWidth();
installFilteredMouseMove(this.results);
this.dropdown.delegate(resultsSelector, "mousemove-filtered", this.bind(this.highlightUnderEvent));
installDebouncedScroll(80, this.results);
this.dropdown.delegate(resultsSelector, "scroll-debounced", this.bind(this.loadMoreIfNeeded));
So it becomes:
this.results = results = this.container.find(resultsSelector);
this.search = search = this.container.find("input.select2-input");
this.container.find("a.select2-choice").attr("tabIndex", this.opts.element.attr("tabIndex")); /* atif */
search.attr("tabIndex", this.opts.element.attr("tabIndex"));
this.resultsPage = 0;
this.context = null;
Make this change in select2.js. Obviously, you need to use the full js version, not the min version.
All you have to do is add one line, stated above. This would become line no#504 in VS2008 if done correctly.