i'm trying to pass a pass php value through "href" from one div to another div.
As we can do this from one page to another like
is there a way to do it using id(css selector)
for ex:
<div id="div1">
</div>
can you please suggest a way to where i can pass a php value through "href" from one division to another division in the same page
Yes. Sure you can. Just use the # in the link. It will tell browser that the link is pointing to an element on the same page.
<!-- Link pointing to target Div -->
Click here to scroll to target div
<!-- Target Div -->
<div id="div<?php echo $id; ?>">
</div>
You can use below code. Pass your php id to your div
<div id="div<?php echo $id ?>"></div>
Related
I am on my way trying to get Masonry running with InfinitScroll. I found out that I need the appended method in Masonry. Example:
http://codepen.io/desandro/pen/nhekz
This doesn't work properly because everytime I hit the append button, my Wordpress page reloads. The console says:
Updating because HTML element modified
After the reload all my added DIVs are gone.
Can someone help?
The Problem was a html Element which forces a page reload.
<h1>Masonry - appended</h1>
<p><button id="append-button">Append new items</button>
<div class="masonry">
<div class="item w3"></div>
<div class="item h2"></div>
<div class="item h4"></div>
</div>
I used a div element insted of the button to add masonry elements and the problem was solved
<div id='test2'>click</div>
I am trying to make a dropbox-like custom context menu. What I need is that when the user right-clicks an element, the options such as "Edit" and "Delete" that pop up in the context menu link to "edit" and "delete" for that specific element. The context menu:
<div class="screenlock-transparent">
<div class="context-menu-wrapper">
<ul class="context-menu">
<li><i class="icon-edit" style="margin-right: 10px;"></i>Edit</li>
<li><i class="icon-trash" style="margin-right: 10px;"></i>Delete</li>
</ul>
</div>
</div>
The way I have gone about this is to user jQuery to fire an event when the user right-clicks an element:
<script type="text/javascript">
$(document).ready(function(){
// Launch on-right-click on element
$(".custom-context-menu").mousedown(function(){
if(event.which == 3) {
if ($(this).hasClass("ul-all-years-faculty")) { // If on the general faculty ul
// Load external php here to build url string specific to the element
// Replace current href value with the url string produced by the external php script
} else if ($(this).hasClass("ul-year-specific-faculty")) {
} else if ($(this).hasClass("ul-semester")) {
} else if ($(this).hasClass("ul-subject")) {
}
}
});
});
</script>
Where you see the quotes if the if statement is where I am trying to write the code that will call my external php script and replace the href of the, for example, "Edit" link in the context menu with an href of a url containing variables specific to the element that was right-clicked.
I know how to use .load() for a div - $("#ID").load(...) will load in the echoed content inside that div. However, what about loading inside the href of a link (a) ?
Thank you so much. I greatly appreciate your help.
If I understand you correctly, and you want to change the href of an a tag, you want to use the .attr() function
http://api.jquery.com/attr/
so it would look something like this
$("a").attr("href", "http://newlink.com")
I have an area on my webpage that is populated by different <div> containers of information. When a link in my navigation bar is pressed, one <div> will fade out and another will fade in. What I'd like to do is have one of these content <div>'s filled with dynamic information, and when a link is pressed on another one of the "pages" it would change which database to load the information from and then display, or fade in, that <div> with the new information.
Sudo:
View information
<div id = "dynamicDiv">
<?php include 'file.php' ?>
</div>
file.php
**Find which database to load information from and display content**
I thought about using $GLOBAL vars, but I'm not sure how to set those from a link, and also it wouldn't reload the div content.
I also considered using a form, but I'm not sure of the "correct" way of doing this would be, and also when the page is reloaded the <div> that is displayed by default would be loaded, not the <div id = "dynamicDiv>
Any suggestions/ideas are very much welcomed....
In this case you should use ajax.
AJAX is used for changing the page content from server without reloading the page.
You can use this JQUERY AJAX And JQUERY LOAD
$(document).ready(function(){
$("#changediv").load("load.php?id=1");
})
in load.php
$id=$_GET['id'];
// use that id for dynamic query in database
$query="SELECT *.....";
$result=mysql_query($query);
echo mysql_fetch_array($result);//somthing like that
All the word echoed in php become response in ajax.
I am not ever sure this is possible but I know you guys will know the answer.
I wonder if it is possible to load the first div on a page into a different page.
Example:
This code is on "list.php"
<div class="message_details">
Some Content 1
</div>
<div class="message_details">
Some Content 2
</div>
I found this article and it works but it brings in all div's but I want to load only the first div.
Load content from external page into another page using Ajax/jQuery
Here is the code I have now that loads all divs
$(document).ready(function() {
$(".loader").load('list.php .message_details');
});
How can I load only the first div? Also is there any way to remove an img tag within the selected div?
Thanks everyone
Use the :first-child selector
$(".loader").load('list.php .message_details:first-child', function() {
$(this).find("img").remove();
});
Reference
simply echo the the div in the second page. Give each div an id, then echo that. (unless i am misunderstanding your goal)
I'm using php session variables to retain page state, as in the example below, it's to maintain the fact that a element has been clicked and receives a new class. The class is removed later if it is clicked a second time.
However I am also setting a global variable so that my client side "knows" the state and executing some other code that affect other elements on the page elsewhere (highlights them). This code uses the "this" of the clicked element to know how to highlight the other elements. <==== this is the important bit.
$("listRow").click(function(){
if (globalVariable == "someClass")
{
// clean global
globalVariable = " ";
/* call a server side script via ajax to unset php session variable */
}else{
/* call a server side script via ajax to create a php session variable, later used on page refresh to retain page state*/
// also set a global js variable for use elsewhere
globalVariable = "someClass";
};
$(this).toggleClass(".someClass");
// alot of code to do something to other elements on the page using some data that is specifically available in this element
});
Now imagine this normal scenario:
User clicks listRow triggering the code. // everything fine so far
User refreshes the page : listRow gets the class it needs BUT....
none of the other elements get highlighted. This happens because the
listRow hasn't been clicked, and I get this.
So what I want to do is create a small function that contains the code to highlight the other page elements.
I have a number of preconditions: All the javascript including global variables are contained in external js files. It is not allowed to put raw js into the markup. i.e. the limitation is that I cannot declare a global variable in the and then use php to populate it from the session variable.
I think that I can identify the fact that the item has been affected by php by doing the following. I say I think because I'm not sure if this is asking the question "if any element in the listRow..." or if the expression can identify the specific element somehow.
function mySelfStarter()
{
if ($("listRow").hasClass("someClass"))
{
// some code
};
};
I know I can simply cause the function to execute on refresh like this somewhere in the document onload:
mySelfStarter();
What I want to do is find the element that has the class someClassand then find the id and then use this id to set both the global variable and the highlighting of other non- related elements. And this all has to be client side code.
Something like:
if ($("listRow").hasClass("someClass"))
{
// find the element that has the class "someclass"
// get the id of this element
// do something with id
};
newly served page before click
<div id="listWrapper" class="wrapper">
<div id="value1" class="listRow"></div>
<div id="value2" class="listRow"></div>
<div id="value3" class="listRow"></div>
<div id="value4" class="listRow"></div>
</div>
after click
<div id="listWrapper" class="wrapper">
<div id="value1" class="listRow"></div>
<div id="value2" class="listRow someClass"></div>
<div id="value3" class="listRow"></div>
<div id="value4" class="listRow"></div>
</div>
after page refresh
<div id="listWrapper" class="wrapper">
<div id="value1" class="listRow"></div>
<div id="value2" class="listRow someClass"></div>
<div id="value3" class="listRow"></div>
<div id="value4" class="listRow"></div>
</div>
I'm not sure I follow, but if you're saving the state on your php session, you can check for that before rendering the page and if the session says the element was clicked, then also render a small js script that will trigger the click event on your element. That way, you get all the side efects you need, just as if the user had clicked the element.
You can trigger a click event by doing something like:
$("#element").trigger("click");
Edit with the final solution
How about this:
$("listRow.someClass").each(function(){
// - this: Is the element with the class
// - $(this).attr("id"): Is the ID of that element
// do something with id
});
How about now? BTW, doing $("listRow") won't probably find anything, since you're telling JQuery to look for a tag called "listRow", are you sure you're not missing a "." or a "#" there?