Insert Text Into Tumblr Ask Box - javascript

Does anyone know if there's a way to add text into the tumblr ask box when the page is first loaded? I'm running a blog where people can ask for advice from either a girl or a guy. I want them to click a link and go to the ask page but then depending on the link they clicked, #AskHim or #AskHer will be pre-added into the ask box. Without these "tags" (just basic text), all questions come to my inbox and I have no idea what perspective (guy or girl) they want their question answered from.
HTML:
<div id="askbox">
<iframe frameborder="0" height="190" id="ask_form" scrolling="no"
src="http://www.tumblr.com/ask_form/whatishethinking.tumblr.com"
width="100%" style="background-color: transparent; overflow: hidden;"
</iframe>
</div>
CSS:
#askbox {
margin: 10px auto;
width:600px;
}
I've found topics on how to insert text into a text box using javascript. However, tumblr has it's own built in tagging/html system so I'm not sure if this is even possible.
i.e.
<script>
function add(text){
var TheTextBox = document.getElementById("Mytextbox");
TheTextBox.value = TheTextBox.value + text;
}
</script>
Also, here is a link to my blog (Main Blog). The user will click either the "Ask Her" or "Ask Him" image links on the left side of my blog.
Then this will take them to my ask page where I want the text to be inserted into the ask box (Ask Page).
Thanks in advance for any advice you can give!

The only way I can think of achieving this off the top of my head is by using the placeholder attribute.
However, I'm not sure you'd be able to manipulate the main text area, since Tumblr utilizes iframes for customized ask pages.

Related

Toggle Accessibility for a website

I am working on a toggle button for enabling/disabling accessibility on a website. Similar to that in iphones.
For example, on the canada.ca government website, they shouldn't have italics but clients rarely consider accessibility when writing their contents.
I was thinking of this idea but I'm not sure if it's a good solution.
Any suggestions/feedback?
You will have to think about everything you wish to change in order to improve "accessibility"... Or be it "readability".
Example:
italic
fonts smaller than __ px
font colors
etc.
So if you taugth about it just a bit, at writting time, by adding some classes... A data attribute can be used to match them and provide a button to toggle these classes out.
Then, the user could "remove those harder to read styles.
$(document).ready(function(){
$("#control button").on("click",function(){
$("*[data-readability]").each(function(){
$(this).toggleClass($(this).data("readbility"));
});
});
});
.small{
font-size:0.4em;
}
.italic{
font-style:italic;
}
.yellow{
color:yellow;
}
#control{
position:fixed;
top:0.5em;
right:0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<span class="small" data-readability="small">This is real small fonts.</span> <span class="italic" data-readability="italic">This is italics.</span> <span class="yellow" data-readability="yellow">This is a hard to read color.</span>
</div>
<div id="control"><button>Click here for a better readability</button></div>
So if all the styling left is not a problem to readbility... And the page still is acceptably nice, that's a way.
Now what can possibly be a problem to readability and accessibility is defined somewhere here.
I think the idea is better than having no accessibility, however by using semantic HTML generally it is not hard to make sites accessible so I would just work on making the page/site accessible as a whole and not only based off a toggle.

Advice on programming a webpage where user input displays a selected image

I am looking into setting up a basic website that displays a simple selection criteria (1 drop down box, 2 radio buttons sets) when the submit button is clicked it opens up a pop up window that displays an image whose location is specified by the selection criteria. This image is being updated at random so the pop-up needs to refresh or at least get and display the new image about every minute.
I have set up a simple html site (see below) that displays the image, located on my machine and refreshes every 30 seconds.
<head>
<meta http-equiv="refresh" content="30">
<title>
Real Time Image Display
</title>
<style>
#geo img {
max-width:100%;
max-height:100%;
margin:auto;
display:inline-block;
vertical-align: middle;
background-size: cover;
}
</style>
</head>
<body bgcolor=#00336>
<div id="geo">
<img src="file:///fileLocation/image.png" height="300" width="550" alt="">
</div>
</body>
I don't believe this is the best way to do this nor have I been able to figure out how to accomplish my original mission using this solution since I am unsure how to pass the selection criteria to these simple html sites to point them to the right image.
Any ideas on where I can look or what I can do?
First, you need to add an ID tag to your image:
<img src="file:///fileLocation/image.png" id="imageToChange" height="300" width="550" alt="">
Then you can use JavaScript to change the image, with no need for a refresh:
function changeImage() {
document.getElementById("imageToChange").src = "/newimage.png";
}
That's the basic of it anyway. It should be noted that your image should not be pulled from the local file system, the way you have it now. It needs to be on the server.
Here is an incredibly simple fiddle to show how this works:
https://jsfiddle.net/durbnpoisn/r7fk8ubz/

scrollToFixed jquery creating blank div

Using this plugin works great, but when I stop the scroll fixed position, it creates the following div.
<div style="display: block; width: 1621px; height: 104px; float: none;"></div>
The dimensions resemble to size of the div being scrolled.
Example: http://litl.it/ simply scroll past the maps area, then scroll back up and there will be an odd blank space.
Anyone know how to remove this issue? I've found one other example that has been closed, but the issue was resolved with a work around creating extra containers, with additional css to comply with the 'random' div created. I'd like to avoid that if possible.
code:
<section id="devices" data-speed="10" data-type="background">
<h1>litl.it now, bookmark it for later</h1>
<p>we provides an easy link shortening solution with better features above the competition, you can now shorten & bookmark your links with control.
</section>
<section id="demographic" data-speed="7" data-type="background">
</section>
<div id="mapoverlay">
<div class="mapcontainer">
<h1>litl.it it records data of your audience</h1>
<p>here you can see litl.it users litling links across the world!</p>
</div>
</div>
<section id="trackstats" data-speed="4" data-type="background">
<h1>Tracking Stats</h1>
</section>
This issue occurs in the Windows Chrome browser (based upon additional comments from users), here is an example:
Edit: it occurs for me in all browsers, maybe the issue is due to the window being too large, resulting in the bottom of the page preventing the scroll from passing over the target div.
Can I please ask you to attempt creating the issue with a small window to ensure the scrolling div passes over the tracking stats box.

Volusion template editing .asp code to include additional header graphic

I hope someone can help as .asp is new to me and this is giving me a lot of head scratching!
Basically we have an ecommerce Volusion template, in the header we'd like to add a new graphic next to one that already exists, should be easy but some .asp code seems to be hiding elements in the header. I try to explain in the code:
ASP
$("#content_area").find("table:contains('Home >')").css("display", "none").html("");
var a = $(".productnamecolorLARGE").html();
if (document.location.href.indexOf("help") == -1) {
if ($(".productnamecolorLARGE").html() != 'Order Status') {
if ($.browser.msie) {
$(".productnamecolorLARGE").html("<tr><td></td><td width='490'><div style='font-size: 21px; margin-bottom: -2px; padding-top: 19px;'>" + a + "</div></td></tr>");
} else {
$(".productnamecolorLARGE").html("<tr><td></td><td width='490'><div style='font-size: 21px; margin-bottom: -25px; padding-top: 19px;'>" + a + "</div></td></tr>");
}
};
} else {
$("#content_area").find("img").eq(0).remove();
}
$("#lnk1").css("color","#79496a");
$("#Header_ProductDetail_ProductDetails_span").parent().parent().parent().parent().parent().remove();
$("#headerTop").find("a").eq(0).html("<ing border=0 src='/v/vspfiles/templates/192/images/view_bag_small.png'>");
$(".video_container").css("padding", "17px 10px 16px 45px");
HTML
<div id="header" style="z-index: 999;">
<div id="display_homepage_title">www.domain.com</div>
<div id="headerTop">
View Bag
About
My Account
This is what I am trying to do:
<div id="headerTop">
<!-- This line is being added --> <ing src="newgrahpic.jpg" width="100" height-"50">
View Bag
About
My Account
When making this change the .asp seems to be adding the existing View bag graphic (line 2) against my new (line 1) and then displays "My Account" to the right of it, whereas My account is hidden with the Display:none; assigned to it before I add the new line.
I appreciate this may sound like a load of nonsense but I hope someone can make some sense of what its doing?!
Thanks in advance for any help.
Rich
Actually it’s impossible :( sorry to disappoint you. Volusion claims to have simple to use structure, but any changes made to template will not work. Only CSS changes work (due to their weird CMS ASP engine that seems to re-write our custom codes). Here is an article that shares in-depth look at complexity of volusion’s templates: http://tech-hive.com/reviews/shopping-carts/volusion-every-themers-nightmare-20100615/#
The real question, is there any other reputable provider that has CML that would allow us to do custom coding? And that’s the question I seek answer to.

Cant explain why page wont work in IE

At the top of this page: http://andrew-muir.com/search/2/#1 - When you click on the slider it will load new results using AJAX into a div. When i chose certain prices on the slider the results look fine in IE and when i chose other prices the results come back all broken.
Any ideas? Thanks!
There's a lot of invalid markup in the HTML fragment that comes back from the slider actions. You've got some unclosed tags, etc.
Example:
<div style="background-color:#252525; padding:5px 10px; height:130px; position:relative;">
<p class="bold" style="color:#8a96a4; margin-bottom:0.5em;">Blue Lucerne lotus jug</p>
<p class="bold" style="color:#FFF; margin-bottom:0.5em;">£4250</p>
<p style="margin-bottom:0.5em;"><p><strong>Superb and very rare 30cm lotus jug in the bl…</p>
<p class="boldred" style="position:absolute; bottom:0px; left:10px;">View details ></p>
</div>
That line with the "Superb and rare" text has an unclosed <strong> tag.
When I try to look at the broken page in the IE 8 developer tool, it won't show me the content of the main <div>. That's a sure sign that the browser has just thrown up its hands in frustration.
edit — weird; it just started working ...

Categories

Resources