I am trying to have the Tweet button updated dynamically so that different text is tweeted (if one presses the Tweet button) every time some event happens.
Actually, what I am trying to achieve is the same as described in the following question:
Dynamically change Tweet Button "data-text" contents
And the provided answer to that question works ok with one annoying small problem. If I implement it like that, the Tweet button blinks when it's updated (disappears and appears) because it is rendered from scratch by using
twttr.widgets.load();
Does anyone have an idea on how would I achieve the same thing but without the "blinking"?
The way I finally solved this was like so.
In the html file I define two divs one after another:
<div id="share_fixed">
<a class="twitter-share-button" href="http://twitter.com/share" data-url=" " data-size="large" data-show-count="false" data-text=" ">
</a>
</div>
<div id="share">
</div>
The div with id="share_fixed" will contain a Tweet button which will be static (rendered only when the page loads).
The other div with id="share" will contain the Tweet button which will be rerendered (updated) every time some event occurs.
In the CSS I position both divs at the same location and overlay the one which changes on top of the fixed one:
#share {
position: absolute;
bottom: 12px;
left: 15px;
z-index: 1;
}
#share_fixed {
position: absolute;
bottom: 12px;
left: 15px;
z-index: 0;
}
This will actually force the fixed "dummy" Tweet button to always be positioned below the one which changes and blinks on reload. Whenever the button on top changes and "blinks" the one below it will remain and since it's exactly the same, it will seem like nothing changes.
In the Javascript file I add e.g. something like this:
var tweetBtn = $(document.createElement('a')).addClass("twitter-share-button")
.attr('href', 'http://twitter.com/share')
.attr('data-url', ' ')
.attr('data-size', 'large')
.attr('data-show-count', 'false')
.attr('data-text', "Some new tweet text");
$("#share iframe").remove();
$("#share").append(tweetBtn);
twttr.widgets.load();
I guess there are more ways to solve this, but this works for me on Chrome, haven't tried on other browsers.
Related
I'm not sure if this is possible but I am helping out with a rather large website that was compiled with .aspx
We are wanting to change a link on the website but there is no actual place to edit the text for the link. I can however use CSS or possibly Javascript to edit the site.
<li>
Other Pages
</li>
<li>
Blue Page
</li>
I want to change the link and text that says Blue Page to something such as Red Page.
example:
<li>
Red Page
</li>
Is it possible to search and replace the text for that hyperlink using CSS?
I have already tried creating an overlay that covers the original text and link but it doesn't position properly on
the page depending on the browser the user uses.
example:
<div id="cover"></div>
#cover {
background: url('../images/cover.png') no-repeat;
top: 80%;
margin-left: 0px;
height: 30px;
width: 203px;
position: relative;
}
Anyone have any other ideas on how I can possibly replace text with CSS or Javascript?
Try something like this with JavaScript,
var bluePage = document.querySelectorAll("a[href='bluepage.aspx']");
if (bluePage[0]) {
bluePage[0].setAttribute("href", "redpage.aspx");
bluePage[0].innerHTML="Red Page";
}
CSS would only change the appearance of the link. The href URI would remain the same underneath, and if a user clicked the link, they'd be taken to the old link location. Hence, you need to use Javascript for this.
As per this answer, you can do search and replace with Javascript like so:
<script type="text/javascript">
function replaceScript() {
var toReplace = 'http://google.com';
var replaceWith ='http://yahoo.com';
document.body.innerHTML = document.body.innerHTML.replace(toReplace, replaceWith);
}
</script>
And you can initialize this function on page load like so:
<body onload="replaceScript();">
That should replace the strings throughout the page. However, the major drawback here is that it only replaces the links on page load. The pages saved on your server will still have the old links, which means there will be a small delay (tens to hundreds of milliseconds, probably) when the user loads any page, because the script needs to do its work, which takes a little bit of time. Also, it won't work if the user has JavaScript disabled in their browser, or if it's visited by a non-browser agent (like bot, crawler or web service), which is less than perfect.
I have been researching this for a long time and this topic seems to be very underrepresented in the coding world. I am using the Jquery Layout UI in my application,
http://layout.jquery-dev.com/
And we only have South and Center panes. I want to be able to "undock" the South pane similar to how devtools can undock from the bottom of the browser and become its own window. i.e.
I tried inspecting devTools to see if I could get any hints from the available code there but wasn't able to find anything useful. Does anyone have ideas on how this could be achieved, or if there are code examples anywhere online that I may have somehow missed? Again, my application is using the jquery layout UI with the South region being the one i want to be able to "undock" and dock back.
There is no way to simply "undock" it. You would have to create a separate page that displays what you want to undock.
You would then create a button that (with Javascript) first removes the bottom portion of your page and then opens a popup with the part you just removed (the separate page).
It's not too hard to create but keep in mind that popup blockers could block it. The Devtools are part of the browser so they aren't affected by a popup blocker.
Here's a working jsFiddle: https://jsfiddle.net/Loveu79d/
$("#popout").click(function() {
$(".bottom").hide(); // You could also use jquery to remove the div from the DOM
$(".top").addClass("fillpage"); // Add a class to the top div to stretch it to 100% height
window.open("http://www.google.com", "popupWindow", "width=800,height=400,scrollbars=no"); // Use this to open your other page that has the same content as the bottom div
});
html,
body {
height: 100%;
}
.top {
border-bottom: 1px solid #000;
}
.top, .bottom {
height: 49%;
}
.fillpage {
height: 100%;
}
.bottom {
color: #FFF;
background: #FF0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<h1>Top part</h1>
<button id="popout">Open popup</button>
</div>
<div class="bottom">
<h1>Bottom part</h1>
</div>
In this case we have the red bottom div with "Bottom part" in it. You would have to create a separate page that has only that content in it, for example "bottom.html". Then you take my code and put that page in the Javascript part where it says "http://www.google.com".
If the bottom part of your page contains content that has been edited client side you would have to use cookies or a database to store those modifications and then load them in the bottom.html page.
I am having trouble getting a certain feature to work.
As you can see here: https://jsfiddle.net/y5jn4tco/1/
<div> CHECK CODE AT JSFIDDLE</div>
I am using the flip jquery plugin which made a flip, where you choose a category, and then gets sent to a certain login screen. My issue is, that I want the bottom one to flip to another backside. I have tried altering the jquery plugin, but without luck. Is there anyone who knows how I could make this work?
So the pink one goes to the pink login, and the blue one goes to the blue login.
Thank you in advance!
You Need To Wrap Your Div int Another Div Then Flip Back Div To Front And Front To back
1 div Is A
2 div is B
A-> 1
Student
2 Company
B -> 2 Buttons
IF Click In btn1 Then Hide company and Flip
$("#centerModuleCompany").css('display','none');
$("#centerModuleStudent").css('display','block');
IF Click In btn1 Then Hide Student and Flip
$("#centerModuleCompany").css('display','block');
$("#centerModuleStudent").css('display','none');
I Wrap The Student And Company Into Main Div I Also rotate Main Div#centerMain Front And Back
Then If You Clicked In Student Then Company Form Hide And Student Display In Div#centerMain
If You Clicked In Company Then Student Form Hide And Company Display In Div#centerMain
And I Change #back To .back
I Solve This In Fork Try This
https://jsfiddle.net/ehab6sqs/
Made some changes to your document.ready function as below:
Here is the DEMO
$(document).ready(function(){
$(".cards").flip({
trigger: 'manual'
});
$("#loginStudent").click(function(){
$(".cards").flip(true);
$("#centerModuleStudent").css('display','block');
$("#centerModuleCompany").css('display','none');
});
$("#loginCompany").click(function(){
$(".cards").flip(true);
$("#centerModuleCompany").css('display','block');
$("#centerModuleStudent").css('display','none');
});
$("#back1,#back2").click(function(){
$(".cards").flip(false);
});
});
I noticed that you have same ids for back button which is violating DOM element rules so I've changed it to back1 and back2 respectively and I am just hiding the alternative div on click of each button and showing the required div
Your CSS changes:
#back1,#back2 {
position: absolute;
left: 10px;
top: 10px;
height: 20px;
cursor: pointer;
}
I'm trying to display a file chooser when a user clicks a link on my page. I've looked around a bit, but still haven't found a complete solution.
I have ruled out binding a listener to the click event on my link and simulating the click event on my form's file field because I've read that Safari doesn't support programmatically clicking on an input[type=file].
Currently I am using the approach where I set the opacity of the file field to 0 and absolute position it over the top of the link, effectively intercepting any clicks on the link. The problem with this is that I can't figure out a way to change the user's cursor when they hover the link since it is obscured by the file input, which doesn't allow for such styling. I have given all immediate parent elements the css style cursor: pointer, but still no luck.
Does anyone have an idea of a different approach I could take in order to get the cursor to change to a pointer on hover of my link? Is my best bet going to be going with something like they have at http://www.uploadify.com/?
EDIT
To explain a little better, I have this file input on my page:
<div class="logo_file">
<input id="logo_file_field" type="file">
</div>
With this css:
.logo_file {
position: absolute; /* this element's parent has position: relative */
top: -65px;
left: 0;
width: 175px;
overflow: hidden;
cursor: pointer;
}
input#logo_file_field {
opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
And I am trying to show the file chooser corresponding to that field when the user clicks this link:
<div class="logo_link_wrap">
<a id="logo_change_link">Change Photo</a>
</div>
Which has this css:
.logo_link_wrap {
margin-top: 38px;
cursor: pointer;
}
Right now I am placing the invisible file field over the link, but the cursor is not turning into a pointer like it should when you hover over a link. The file chooser does display, it's really only the cursor not changing that is holding me up. Thanks
The problem is that you are placing the input field over the link and making the input field invisible by using opacity:0;. But the input field is still there and is blocking the cursor access to the link.
Would it not be better to replace the opacity with display:none?
With display:none you hide the input field and remove it from the flow. I'm assuming that you want the link to be used to active the upload function of the input field, and I'm also assuming that you know how to do that.
Try wrapping the input tag in an anchor tag
<input type="file" ... />
SUPER SHORT VERSION:
Elements on a jQuerymobile-based html5 webapp don't respond directly to vclicks on an iPad. Instead, they silently scroll to the top of the page and trigger a vclick on whatever's under the same region of the screen.
LONG VERSION WITH PICTURES AND CODE:
I'm using JQuerymobile and I'm having a problem with my page responding to some vclick events when I'm using my iPad. I've got a page with a bunch of elements that are bound to respond to vclick events. If everything fits onto my iPad's display without scrolling, everything works perfectly. If I need to scroll to see the element I want to click, I get the following behavior:
I tap my finger where the red circle is here:
The page flickers and the page responds as if I clicked the area in the little blue circle:
(blue circle image redacted for lack of hyperlinks to noobs (It's Q43ri.png on imgur)
I was confused as to what the heck was happening until I superimposed the screens:
So when I click one of my divs, it seems like it's paying attention to the coordinates I click on the display, but then scrolling to the top of the window and actually executing the click from that perspective. How do I fix this?
Here's the html for that section of the page:
<div id="inventoryPageContainer" style="padding-right: 100px;">
<div id="inventoryDisplayHeaders">
<div class="inventoryPageName inventoryPageColumn header">Name</div>
<div class="inventoryPageQuant inventoryPageColumn header">#</div>
<div class="inventoryPageWt inventoryPageColumn header">Wt.</div>
</div>
</div>
<div id="inventoryTemplate" class="inventoryPageRow" style="display: none;">
<div class="inventoryPageName inventoryPageColumn">Template Item Name</div>
<div class="inventoryPageQuant inventoryPageColumn">#</div>
<div class="inventoryPageWt inventoryPageColumn">X lb</div>
</div>
<div style="clear: both; border-bottom: 2px solid black;"></div>
All of the divs are clones of that inventoryTemplate item. If you need the CSS for that (I don't know man, I'm trying to give anyone reading this all the info I've got):
#inventoryPage .inventoryPageName {
width: 100%;
}
#inventoryPage .inventoryPageQuant {
width: 50px;
margin-right: -50px;
vertical-align: middle;
}
#inventoryPage .inventoryPageWt {
width: 50px;
margin-right: -50px;
right: -50px;
vertical-align: middle;
}
Here's the event binding code:
templateCopy.find('.inventoryPageName').text(row.itemName).bind('vclick.inventoryPage', { row: row }, generateItemDescriptionDialog);
templateCopy.find('.inventoryPageQuant').text(row.quantity).bind('vclick.inventoryPage', { row: row }, generateItemQuantityDialog);
generateItemDescriptionDialog and generateItemQuantityDialog both set some values on some dialog pages and then trigger the dialog pages to show with $.changePage("#thepages").
So uh.. why's this happen and how do I make it not happen?
(It's an RPG character sheet webapp if anyone's wondering why I'm cataloging weapons and guns.)
I think my problem was how I wrote my event handlers. I went through and added:
if (event.preventDefault)
event.preventDefault();
to the beginning of each handler and made sure the handlers returned false. Admittedly, I don't know precisely what this did, so I'm cargo-culting a bit here, but it did solve the problem.